- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › image fading question
I’m pretty new to jQuery so please bear with me on this…
I’d like to fade the two images in the #content div one into another (one time only) when the page is loaded. What I want to do seems simple enough, so I’d like to avoid a plugin, if possible, and just have a short script do it for me.
Here is the html:
And here’s what I’m trying to do with jQuery (I’m sure this is quite horrible):
$(‘img#zoomedOut’).fadeOut(2500),
$(‘img#zoomedIn’).fadeIn(2500);
});
The fadeOut of the first image seems to work fine, but then the second image just appears suddenly, without fading in.
How can I reconfigure the jQuery script to achieve a smooth, simultaneous fadeIn/fadeOut of these two images?
Many thanks in advance!!
I’m not a pro at Jquery, but here’s my guess:
$(‘img#zoomedOut’).fadeOut(2500, function() {
$(‘img#zoomedIn’).fadeIn(2500);
});
});
If I’m not mistaken, that will first fade out the first image, and once that is done, it will start fading in the second image.
Let me know how that works.
I guess Ashton is right… just check it out and let us know…
A friend of mine, who is a real jQuery ninja helped me out.
This was his recommendation:
1.Set the css of the second image to display:none
2.Use the following jQuery functionality.
setTimeout(crossFade, 3000);
function crossFade(){
$(“#hp-image1”).fadeOut(2500);
$(“#hp-image2”).fadeIn(2500);
}
});
It works like a charm! Thank you both for giving a hoot about my jQuery newbie issues…