CODEWITHSUNDEEP
javascriptjqueryimagefade
Jordan
Jordan

Reputation: 237

jQuery switch image with fade

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);
    });

Upvotes: 0

Views: 2114

Answers (4)

John
John

Reputation: 417

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));
});

Upvotes: 0

John
John

Reputation: 417

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));
});

Upvotes: 1

Oksid
Oksid

Reputation: 80

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.

Upvotes: 0

bobzer
bobzer

Reputation: 99

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

Upvotes: 0

Related Questions