The Admiral

# November 25, 2009 at 7:35 pm

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:

Code:

Jorge Tacla

• work
• biography
• projects
• library
• contact

© 2009 Jorge Tacla. All Rights Reerved.

And here’s what I’m trying to do with jQuery (I’m sure this is quite horrible):

Code:

$(document).ready(function() {

$(‘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!!

AshtonSanders

# November 26, 2009 at 4:25 pm

I’m not a pro at Jquery, but here’s my guess:

Code:

$(document).ready(function() {

$(‘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.

janebush08

# November 27, 2009 at 7:24 am

I guess Ashton is right… just check it out and let us know…

The Admiral

# November 27, 2009 at 2:41 pm

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.

Code:

$(document).ready(function(){

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…