javascript - 使用 jQuery .animate() + ie8 兼容性创建交叉淡入淡出的图片库时遇到问题

Question

在基于函数的jQuery上制作交叉淡入淡出图片库时遇到问题.animate()- 不知道如何修复下一张图片的淡入淡出以进行平滑淡入淡出（具有 ie8 兼容性）？ https://jsfiddle.net/Vimpil/fqhc1e9m/

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

Answer 1

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

});