[jQuery] Re: how to fade in image after the site loads?
Hi,
Try something like this:
$('#photo img').load(function() {
$('.pic').fadeIn();
$('div.position').fadeOut();
$('.site').fadeIn();
});
The .load() event should fire when the images has loaded.
You don't need to remove the classes pic and site to get the fades
in/out to work.
Paul
On Feb 11, 11:17 pm, surreal5335 surrea...@hotmail.com wrote:
I am working making an intro page to a photo site and I need the image
to fade in slowly after the site finishes loading.
I believe I have the jquery correct but something is obviously wrong.
Right the now the image is hidden, but it wont fadeIn. I am also
trying to get the text Please wait for site to load to slowly fadeOut
during this, then after all thats done, fadeIn the Enter Site text.
Here is the code I am using for it. So far only a few things are
working properly.
script type=text/javascript
src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/
jquery.min.js/script
script type=text/javascript
$(document).ready(function(){
$(span).ready(function(){
$(this).removeClass(pic){
$(this).fadeIn(4000);
}
},
function() {
$(div).fadeOut(6000);
},
function() {
$(a#site).removeClass(site);
$(this).fadeIn(1000);
});
});
/script
style type=text/css
a.site {display: none}
span.pic {display: none}
table.position {position: center}
div.position {text-align: center}
/style
/head
body
table border=1 class=position
tr
td
span id=photo class=pic
img src=/test/land_scape_5.png
/span
/td
/tr
tr
td
div class=positionPlease wait for site to load/div
a href=# class=site id=site style=text-align: rightEnter
Site/a
/td
/tr
/table
Here is the link to the page to see whats it giving me:
http://royalvillicus.com/test/photo.html
I appreciate all the help
[jQuery] Re: how to fade in image after the site loads?
Thanks a lot for the help, unfortunately it didnt take. One more
thing, how could I go about getting the $('.site').fadeIn(); to
execute after the other two have finished?
I wish I could offer some suggestions to help spark an idea on your
end, but I am drawing a complete blank...Which is why I am on here
asking for help.
So thank you very much for any other ideas you may have.
On Feb 12, 3:54 am, Paul Mills paul.f.mi...@gmail.com wrote:
Hi,
Try something like this:
$('#photo img').load(function() {
$('.pic').fadeIn();
$('div.position').fadeOut();
$('.site').fadeIn();
});
The .load() event should fire when the images has loaded.
You don't need to remove the classes pic and site to get the fades
in/out to work.
Paul
On Feb 11, 11:17 pm,surreal5335surrea...@hotmail.com wrote:
I am working making an intro page to a photo site and I need the image
to fade in slowly after the site finishes loading.
I believe I have the jquery correct but something is obviously wrong.
Right the now the image is hidden, but it wont fadeIn. I am also
trying to get the text Please wait for site to load to slowly fadeOut
during this, then after all thats done, fadeIn the Enter Site text.
Here is the code I am using for it. So far only a few things are
working properly.
script type=text/javascript
src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/
jquery.min.js/script
script type=text/javascript
$(document).ready(function(){
$(span).ready(function(){
$(this).removeClass(pic){
$(this).fadeIn(4000);
}
},
function() {
$(div).fadeOut(6000);
},
function() {
$(a#site).removeClass(site);
$(this).fadeIn(1000);
});
});
/script
style type=text/css
a.site {display: none}
span.pic {display: none}
table.position {position: center}
div.position {text-align: center}
/style
/head
body
table border=1 class=position
tr
td
span id=photo class=pic
img src=/test/land_scape_5.png
/span
/td
/tr
tr
td
div class=positionPlease wait for site to load/div
a href=# class=site id=site style=text-align: rightEnter
Site/a
/td
/tr
/table
Here is the link to the page to see whats it giving me:
http://royalvillicus.com/test/photo.html
I appreciate all the help
[jQuery] Re: how to fade in image after the site loads?
Hi again,
Sorry that didn't work. It might be interacting with something else in
your HTML or JS.
You can chain effects together by using a callback function so to
chain all three you would do this:
$(document).ready(function(){
$('#photo img').load(function() {
$('.pic').fadeIn(4000, function(){
$('div.position').fadeOut(6000, function(){
$('.site').fadeIn(1000);
});
});
});
});
I've just popped this code into a demo on jsbin and seems to be
working fine.
http://jsbin.com/obezi
(nb - also just spotted that '' is missing from end of the img tag
in your code above!)
Paul
[jQuery] Re: how to fade in image after the site loads?
The 'load' event doesn't fire in Internet Explorer if the image is
cached, maybe that's why.
$('#photo img').bind('load readystatechange', function(e) {
if (this.complete || this.readyState == 'complete' e.type =
'readystatechange') {
$('.pic').fadeIn();
$('div.position').fadeOut();
$('.site').fadeIn();
};
});
On Feb 12, 3:32 pm, surreal5335 surrea...@hotmail.com wrote:
Thanks a lot for the help, unfortunately it didnt take. One more
thing, how could I go about getting the $('.site').fadeIn(); to
execute after the other two have finished?
I wish I could offer some suggestions to help spark an idea on your
end, but I am drawing a complete blank...Which is why I am on here
asking for help.
So thank you very much for any other ideas you may have.
On Feb 12, 3:54 am, Paul Mills paul.f.mi...@gmail.com wrote:
Hi,
Try something like this:
$('#photo img').load(function() {
$('.pic').fadeIn();
$('div.position').fadeOut();
$('.site').fadeIn();
});
The .load() event should fire when the images has loaded.
You don't need to remove the classes pic and site to get the fades
in/out to work.
Paul
On Feb 11, 11:17 pm,surreal5335surrea...@hotmail.com wrote:
I am working making an intro page to a photo site and I need the image
to fade in slowly after the site finishes loading.
I believe I have the jquery correct but something is obviously wrong.
Right the now the image is hidden, but it wont fadeIn. I am also
trying to get the text Please wait for site to load to slowly fadeOut
during this, then after all thats done, fadeIn the Enter Site text.
Here is the code I am using for it. So far only a few things are
working properly.
script type=text/javascript
src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/
jquery.min.js/script
script type=text/javascript
$(document).ready(function(){
$(span).ready(function(){
$(this).removeClass(pic){
$(this).fadeIn(4000);
}
},
function() {
$(div).fadeOut(6000);
},
function() {
$(a#site).removeClass(site);
$(this).fadeIn(1000);
});
});
/script
style type=text/css
a.site {display: none}
span.pic {display: none}
table.position {position: center}
div.position {text-align: center}
/style
/head
body
table border=1 class=position
tr
td
span id=photo class=pic
img src=/test/land_scape_5.png
/span
/td
/tr
tr
td
div class=positionPlease wait for site to load/div
a href=# class=site id=site style=text-align: rightEnter
Site/a
/td
/tr
/table
Here is the link to the page to see whats it giving me:
http://royalvillicus.com/test/photo.html
I appreciate all the help
