How to add fading or image transition effect using JQuery?
Asked Answered
B

3

5

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.

Beaconsfield answered 31/1, 2011 at 23:30 Comment(0)
L
9

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');
});
Lifegiving answered 31/1, 2011 at 23:52 Comment(4)
Trying it. This code looks really small. If works, I will accept it.Beaconsfield
I tried it. It does the fading but the fading is little long. I see whole area gets whitish for a brief moment (fraction of sec). Then it loads new image. Looks little ugly. I have seen other people doing it nicely where image transition happens with very quickly.Beaconsfield
Ok, I'll switch to animate, hold on. ;-)Lifegiving
I am happy with .fadeTo('fast', 0.7, function () { $(this).attr('src', '..').fadeTo('slow', 1); });Beaconsfield
M
1

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.

Millicent answered 1/2, 2011 at 0:10 Comment(1)
I just have one image. If nothing works as expected, I will look at this as my last resort. Thank you very much for replying.Beaconsfield
G
0

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> 
Glaikit answered 31/1, 2011 at 23:44 Comment(4)
That fades completely out and in. I thought he was asking for transitional fx - crossfades or some such.Glaikit
All I asked for was: when a new image gets loaded, I want to hide the older image with a fading effect and load the new image with a fading effect. That way user won't see a sudden change of the image. Sorry, if I was not clear enough.Beaconsfield
Makes sense. Just make sure you define the dimensions of the container for that image or it will shift the layout of the site when fadeOut completes. I just happened to be doing this very thing when i saw this post, except the client asked for cross fades.Glaikit
For what it's worth, all sites should include the width/height attributes. Even if they're optional, it's good practice to include them to give your browser a break when rendering the page while waiting on content (likewise, so it doesn't ruin design should content go missing).Lifegiving

© 2022 - 2024 — McMap. All rights reserved.