How to add fading or image transition effect using JQuery?

Question

I have just one <img> element on my page. I change the src attribute of this image every 7 seconds.

I see the new images every 7 secs, but it would be nicer if I can add some fading or transitions effect when loading new image.

Does some have simple script for this?

I don't need any plugin. Just need some clue or few lines of sample for doing it.

Answer 1

Despite what KaiQing mentioned, you can use the callbacks ability of jQuery to fade in/out the image while you're changing it. This can be done like so: http://www.jsfiddle.net/bradchristie/HsKpq/1/

$('img').fadeOut('slow',function(){
    $(this).attr('src','/path/to/new_image.png').fadeIn('slow');
});

Answer 2

You'll want to use two images:

<img id="backImg" />
<img id="frontImg" />

Set #backImg to be behind #frontImg like so:

#backImg
{
    position: absolute;
}

Then, in your code that fires every 7 seconds, fadeOut the front image... this will automatically do your crossfade effect because the back image is already loaded behind it. When the fade is done, set the source of the front image to the back image's src, show it, and pre-load the next image into the back image:

function transitionImages(preloadImgUrl)
{
    $("#frontImg").fadeOut("slow", function()
    {
        $("#frontImg").attr("src", $("#backImg").attr("src")).show();
        $("#backImg").attr("src", preloadImgUrl);
    }
}

This all assumes your images are identically sized. If not, you'll want to be just a little more elaborate with the css and wrap the images in divs that fade out.

Answer 3

You can't do this with just one image.

Check this out:

    <div id="main_over"></div> 
    <div id="main_img"></div> 
    <div id="himg" style="display:none; clear:both; margin-top:40px;"> 

            <img id="si_15" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_1__large.jpg" alt="dummy_image_large_1" /> 

            <img id="si_16" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_2__large.jpg" alt="dummy_image_large_2" /> 

            <img id="si_17" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_3__large.jpg" alt="dummy_image_large_3" /> 

            <img id="si_18" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_4__large.jpg" alt="dummy_image_large_4" /> 

    </div> 
<style> 
#main_over{position:absolute; z-index:10; width:800px; height:600px; background:#fff; display:block;}
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
    var i = 0;
    $('#himg img').each(function(){
        if(i == 0)
        {
            $('#main_over').html('<img src="' + $(this).attr('src') + '" alt="" />');

        }
        if(i == 1)
        {
            $('#main_img').html('<img src="' + $(this).attr('src') + '" alt="" />');
        }
        i ++;

        slide.arr.push($(this).attr('src')); 
    });

    setTimeout(function(){
        if(slide.arr.length < 2)
            slide.fade(0);
        else
            slide.fade(2);
    }, 3000);
});

var slide = {
    arr: Array(),
    fade: function(i)
    {
        $('#main_over').fadeOut("medium");
        setTimeout(function(){slide.next(i);}, 1000);
    },
    next: function(i)
    {
        $('#main_over').html($('#main_img').html());
        $('#main_over').css('display', 'block');

        $('#main_img').html('<img src="' + slide.arr[i] + '" alt="" />');

        i++;
        if(i >= slide.arr.length)
            i = 0;

        setTimeout(function(){slide.fade(i);}, 3000);
    }
}

</script>