jQuery switch image with fade

Question

I have a script which changes some images on hover. Works really well, however I would like to add a little fade between the two images. Here is the script. Really new to jQuery so I'm a little confused where to add it. Any help would be appreciated

jQuery(document).ready(function ($) {
    var img_src = "";
    var new_src = "";
    $(".rollover").hover(function () {
        img_src = $(this).attr('src');
        new_src = $(this).attr('rel');
        $(this).attr('src', new_src);
        $(this).attr('rel', img_src);
    }, function () {
        $(this).attr('src', img_src);
        $(this).attr('rel', new_src);
    });
    //preload images 
    var cache = new Array();
    //cycle through all rollover elements and add rollover img src to cache array 
    $(".rollover").each(function () {
        var cacheImage = document.createElement('img');
        cacheImage.src = $(this).attr('rel');
        cache.push(cacheImage);
    });

John · Answer 1 · 2014-04-07T16:50:46.463

1

function imageSwitch(img) {
    var src = img.attr('src');
    var rel = img.attr('rel');
    img.fadeOut('fast', function() {
            img.attr('src', rel);
            img.attr('rel', src);
            img.fadeIn('fast');
    });
}

$(".rollover").on('mouseenter', function() {
        imageSwitch($(this));
});

edited Apr 07 '14 at 16:50

answered Apr 07 '14 at 16:17

John

417
2
6

Thanks! It looks nice but sorry I should have explained this better. Rather then just fade it out THEN fade it in, is there a way to transition the two images? – Jordan Apr 07 '14 at 16:27
You could load the two images with one on top of the other. Then just fade out the top one. – ChrisBarthol Apr 07 '14 at 16:42

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

a small search give me that : http://www.simonbattersby.com/demos/crossfade_demo_basic.htm i think it's kinda what you're looking for.

or else you with thread that do something also : jQuery Change Image src with Fade Effect

edited May 23 '17 at 12:05

Community

1
1

answered Apr 07 '14 at 16:30

bobzer

99
1
7

score 0 · Answer 3 · answered Apr 07 '14 at 16:33

it would be better to use .mouseenter for this.

and you could do .animate() opacity to 0 and in the call back you would change the image src, so that the src change after the animation ended.

$('.rollover').mouseenter(function () {
   var me = $(this),
     new_src = me.attr('rel'),
     anmiation_duration = 300; // 300ms
   me.animate({
     opacity: 0
   }, anmiation_duration, function () {
     me.attr('src', new_src).css({'opacity':'1'});
   })
});

After the src is changed you can do another .animate() to set the opacity back to 1.

I would however suggest to have the other image already displayed behind the first image, (images placed over each other using position:absolut). That way the opacity change would create sort of morf effect.

Good note about `mouseenter`. Edited. – John Apr 07 '14 at 16:50 — John, Apr 07 '14 at 16:50

score 0 · Answer 4 · edited May 23 '17 at 10:26

Briefly tested, thanks to @Oksid for the mouseenter comment.

EDITED

The HTML:

<img class="front rollover" src="http://placehold.it/350x150/006699" rel="http://placehold.it/350x150/000000" />

The CSS:

.image_holder {
  position: relative;
}

.image_holder img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.image_holder img.front {   
  z-index: 2 !important;
}

The jQuery:

function init_rollovers() {
    $(".rollover").each(function() {
        var w = $(this).width()+'px';
        var h = $(this).height()+'px';
        var src = $(this).attr('src');
        var rel = $(this).attr('rel');
        $(this).addClass('shown');
        if (!$(this).parents('.image_holder').length) {
            $(this).wrap('<div class="image_holder" style="width:'+w+';height:'+h+';"></div>');
            $(this).parents('.image_holder').append('<img src="'+rel+'" />');
        }
    });
}

init_rollovers();

function doImageSwitch(el, speed=425) {
    var front = el.find(".front");
    if (front.hasClass('shown')) {
        front.fadeTo(speed, 0, function() {
            $(this).removeClass('shown'); 
        });
    }
    else {
        front.animate({
            opacity: 1
        }, speed, function() {
            $(this).addClass('shown'); 
        });
    }
}

$(document).on('mouseenter', '.image_holder', function() {
    doImageSwitch($(this));
});

Cool, thanks! Only problem is that it moves all my images to the bottom of the mark up? Just below when I add rollover.js, not where the images actually are in the mark up? http://i57.tinypic.com/70jlls.png — Jordan, Apr 07 '14 at 18:17
I updated the answer to use jQuery's `wrap()` method, which allows you to just have your images wrapped, and not to specify a container. — John, Apr 07 '14 at 18:50

jQuery switch image with fade

4 Answers4