2016-09-06 52 views
2

在創建交叉淡化圖片庫時遇到問題jQuery基於.animate()函數 - 不知道如何修復下一張圖片的fadeIn平滑的crossfading(與ie8 compability)? https://jsfiddle.net/Vimpil/fqhc1e9m/在使用jQuery .animate()+ ie8 compability創建交叉淡入圖片庫時遇到問題

$(".min_gal_small_img").click(function(event) { 
    var img_data = $(this).data("big-image"); 
    $(".min_gal_big_img").animate({opacity: "0"},"400"); 
    $(".min_gal_big_img img").attr({"src": img_data, opacity:"0"},"0"); 
    $(".min_gal_big_img").animate({opacity: "1"},"400"); 
}); 

回答

0

jQuery.when()函數是適合完美它。在ie8它也在工作。 https://jsfiddle.net/Vimpil/5abdj39s/

$(".min_gal_small_img").click(function(event) { 

var img_data = $(this).data("big-image"); 

$.when($(".min_gal_big_img").animate({ 
    opacity: "0" 
    }, "400")).done(function(x) { 

    $(".min_gal_big_img img").attr({ 
    "src": img_data, 
    opacity: "0" 
    }, "0"); 

    $(".min_gal_big_img").animate({ 
    opacity: "1" 
    }, "400"); 
}); 

});