Forums

The Admiral

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:

<div id=\"page-wrap\">
		<div id=\"header\">
			<h1>Jorge Tacla</h1>
			<ul id=\"main-nav\">
				<li id=\"first\"><a href=\"#\">work</a></li>
				<li id=\"second\"><a href=\"#\">biography</a></li>
				<li  id=\"third\"><a href=\"#\">projects</a></li>
				<li  id=\"fourth\"><a href=\"#\">library</a></li>
				<li  id=\"fifth\"><a href=\"#\">contact</a></li>
			</ul><!--end main-nav-->
		</div><!--end header-->
		<div id=\"content\">
		<img id=\"zoomedOut\" src=\"images/backgroundFader1.jpg\" alt=\"backgroundImage\"/>
		<img id=\"zoomedIn\" src=\"images/backgroundFader2.jpg\" alt=\"zoomed\"/>
		</div><!--end content-->
		<div id=\"footer\">
			<p>&copy; 2009 Jorge Tacla. All Rights Reerved.</p>
		</div><!--end footer-->
	</div><!--end page-wrap-->

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

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

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

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

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

The Admiral

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.

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

treehouse : what would you like to learn today?

Forums

image fading question