使用jQuery .animate()+ ie8 compability创建交叉淡化图像库时遇到问题

时间:2016-09-06 20:21:14

标签: javascript jquery html jquery-animate cross-fade

基于.animate()功能在 jQuery 上制作交叉淡化图片库时遇到问题 - 不知道如何修复下一张图片的淡入淡出以实现平滑交叉渐变(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");
});

1 个答案:

答案 0 :(得分: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");
});

});