How can I fade one image into another with jquery? As far as I can tell you would use fadeOut, change the source with attr() and then fadeIn again. But this doesn't seem to work in order. I don't want to use a plugin because I expect to add quite a few alterations.
Thanks.
In the simplest case, you'll need to use a callback on the call to fadeOut().
Assuming an image tag already on the page:
<img id="image" src="http://sstatic.net/so/img/logo.png" /> You pass a function as the callback argument to fadeOut() that resets the src attribute and then fades back using fadeIn():
$("#image").fadeOut(function() { $(this).load(function() { $(this).fadeIn(); }); $(this).attr("src", "http://sstatic.net/su/img/logo.png"); }); For animations in jQuery, callbacks are executed after the animation completes. This gives you the ability to chain animations sequentially. Note the call to load(). This makes sure the image is loaded before fading back in (Thanks to Y. Shoham).
$("#main_image").fadeOut("slow",function(){ $("#main_image").load(function () { //avoiding blinking, wait until loaded $("#main_image").fadeIn(); }); $("#main_image").attr("src","..."); }); Well, you can place the next image behind the current one, and fadeOut the current one so that it looks like as though it is fading into the next image.
When fading is done, you swap back the images. So roughly:
<style type="text/css"> .swappers{ position:absolute; width:500px; height:500px; } #currentimg{ z-index:999; } </style> <div> <img src="" alt="" id="currentimg" class="swappers"> <img src="" alt="" id="nextimg" class="swappers"> </div> <script type="text/javascript"> function swap(newimg){ $('#nextimg').attr('src',newimg); $('#currentimg').fadeOut( 'normal', function(){ $(this).attr('src', $('#nextimg').attr('src')).fadeIn(); } ); } </script> Are you sure you're using the callback you pass into fadeOut to change the source attr and then calling fadeIn? You can't call fadeOut, attr() and fadeIn sequentially. You must wait for fadeOut to complete...
For those who want the image to scale according to width percentage (which scale according to your browser width), obviously you don't want to set height and width in PIXEL in CSS.
This is not the best way, but I don't want to use any of the JS plugin.
So what can you do is:
Here is the CSS structure for your reference:
.design-banner { position: relative; width: 100%; #first-banner { position: absolute; width: 100%; } #second-banner { position: relative; width: 100%; } } Then, you can safely fade out your original banner without the content which placed after your image moving and blinking up and down
Old question but I thought I'd throw in an answer. I use this for the large header image on a homepage. Works well by manipulating the z-index for the current and next images, shows the next image right under the current one, then fades the current one out.
CSS:
#jumbo-image-wrapper { width: 100%; height: 650px; position: relative; } .jumbo-image { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } HTML:
<div id="jumbo-image-wrapper"> <div class="jumbo-image" style="background-image: url('img/your-image.jpg');"> </div> <div class="jumbo-image" style="background-image: url('img/your-image-2'); display: none;"> </div> </div> Javascript (jQuery):
function jumboScroll() { var num_images = $("#jumbo-image-wrapper").children(".jumbo-image").length; var next_index = jumbo_index+1; if (next_index == num_images) { next_index = 0; } $("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).css("z-index", "10"); $("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).css("z-index", "9"); $("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).show(); $("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).fadeOut("slow"); jumbo_index = next_index; setTimeout(function(){ jumboScroll(); }, 7000); } It will work no matter how many "slides" with class .jumbo-image are in the #jumbo-image-wrapper div.