jQuery fade to new image

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.

Answers:

Answer

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).

Here's a working example

Answer
$("#main_image").fadeOut("slow",function(){
    $("#main_image").load(function () { //avoiding blinking, wait until loaded
        $("#main_image").fadeIn();
    });
    $("#main_image").attr("src","...");
});
Answer

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>
Answer

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

Answer

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.

Answer

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:

  1. Create one same size transparent PNG and put an ID to it as second-banner
  2. Name your original image as first-banner
  3. Put both of them under a DIV

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.