帶有淡入淡出功能的jQuery切換圖像

Question

我有一個腳本，可以在懸停時更改某些圖像。工作得很好，但是我想在兩張圖像之間添加一點淡入淡出。這裏是腳本。真的很新的jQuery，所以我有點困惑在哪裏添加它。任何幫助，將不勝感激

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

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

Answer 2

一個小的搜索給我說：http://www.simonbattersby.com/demos/crossfade_demo_basic.htm我覺得這有點兒你在找什麼。

要不你線程做一些事情也： jQuery Change Image src with Fade Effect

Answer 3

這將是更好地使用.mouseenter這一點。

您可以將.animate（）不透明度設置爲0，並且在回調函數中您將更改圖像src，以便在動畫結束後更改src。

$('.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'}); 
    }) 
}); 

後在src改變，你可以做另一個.animate（）來設置不透明度回到1

但我會建議已經顯示後面的第一個圖像（圖像的其他圖像使用位置：absolut放置在彼此之上）。這樣不透明度的改變會產生一種形式效應。

Answer 4

經過簡短測試，感謝@Oksid對mouseenter的評論。

EDITED

的HTML：

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

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

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