使用回调函数

Question

我正在点击（上一个/下一个按钮）更改图像源，我想淡出图像，然后更改源并将其淡入，但我无法顺利过渡。我尝试在淡入淡出和更改源之间添加.delay()但仍然在淡出结束之前发生src更改。我尝试添加.stop()但只停止当前正在运行的动画，并且属性更改不算作动画。

var images = ['http://i.imgur.com/U82gG8H.jpg', 'http://i.imgur.com/kVy4G4R.jpg', 'http://i.imgur.com/BtMikrd.jpg'];

var count = 0;

$('.next').on('click', function() {
  if (count !== images.length-1) {
    count++;
    $('.product_image img').fadeTo(300, 0).delay(600).attr('src', '').attr('src', images[count]).fadeTo(300, 1);
  }
});

$('.previous').on('click', function() {
  if (count !== 0) {
    count--;
    $('.product_image img').fadeTo(300, 0).delay(400).attr('src', '').attr('src', images[count]).fadeTo(300, 1);
  }
});

.navigation {
  display: block;
}
.navigation .previous,
.navigation .next {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #ddd;
  color: #fff;
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}
.navigation .next {
  margin-right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="product_image">
  <img src="http://i.imgur.com/U82gG8H.jpg" />
</div>
<div class="navigation">
  <div class="previous">&lt;</div>
  <div class="next">&gt;</div>
</div>

感谢任何帮助。

Answer 1

您需要使用第一个fadeTo的回调函数，否则图像会同时淡出，更改并再次淡入。试试这个：

＆＃13;

var images = ['http://i.imgur.com/U82gG8H.jpg', 'http://i.imgur.com/kVy4G4R.jpg', 'http://i.imgur.com/BtMikrd.jpg'];
var count = 0;

$('.next').on('click', function() {
  if (count !== images.length - 1) {
    count++;
    $('.product_image img').fadeTo(300, 0, function() {
      $(this).attr('src', images[count]).fadeTo(300, 1);
    });
  }
});
$('.previous').on('click', function() {
  if (count !== 0) {
    count--;
    $('.product_image img').fadeTo(300, 0, function() {
      $(this).attr('src', images[count]).fadeTo(300, 1);
    });
  }
});

＆＃13;

.navigation {
  display: block;
}
.navigation .previous,
.navigation .next {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #ddd;
  color: #fff;
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}
.navigation .next {
  margin-right: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="product_image">
  <img src="http://i.imgur.com/U82gG8H.jpg" />
</div>
<div class="navigation">
  <div class="previous">&lt;</div>
  <div class="next">&gt;</div>
</div>

＆＃13;

Answer 2

使用回调函数

我建议使用记录为 here 的complete回调。

回调被定义为一个函数，并在不透明度值之后添加，如下所示：

.fadeTo( duration, opacity [, complete ] )

回放函数将在动画完成后触发，允许我们在图像被“隐藏”时更改src属性，然后将其淡入。

示例

var images = ['http://i.imgur.com/U82gG8H.jpg', 'http://i.imgur.com/kVy4G4R.jpg', 'http://i.imgur.com/BtMikrd.jpg'];

var count = 0,
    productImage = $('.product_image').children('img');

$('.next').on('click', function() {
  
  if (count !== images.length - 1) {
    
    count++;
    
    productImage.fadeTo(300, 0, function() {

      productImage.attr('src', images[count]).fadeTo(300, 1);

    });
  }
});

$('.previous').on('click', function() {
  
  if (count !== 0) {
    
    count--;
    
    productImage.fadeTo(300, 0, function() {

      productImage.attr('src', images[count]).fadeTo(300, 1);

    });
  }
});

.navigation {
  display: block;
}
.navigation .previous,
.navigation .next {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #ddd;
  color: #fff;
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}
.navigation .next {
  margin-right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="product_image">
  <img src="http://i.imgur.com/U82gG8H.jpg" />
</div>
<div class="navigation">
  <div class="previous">&lt;</div>
  <div class="next">&gt;</div>
</div>

Answer 3

.attr()函数不是基于队列的方法，因此延迟不会对它产生任何影响。您可以使用.delay()将方法添加到动画队列中。

同时预加载图像可以改善过渡。

var images = ['http://i.imgur.com/U82gG8H.jpg', 'http://i.imgur.com/kVy4G4R.jpg', 'http://i.imgur.com/BtMikrd.jpg'];

//image preloading
images.forEach(function(src) {
  var img = new Image();
  img.src = src;
})

var count = 0;

$('.next').on('click', function() {
  count++;
  count = count >= images.length ? 0 : count;
  $('.product_image img').fadeTo(300, 0).delay(600).queue(function(next) {
    $(this).attr('src', images[count]);
    next();
  }).fadeTo(300, 1);
});

$('.previous').on('click', function() {
  count--;
  count = count < 0 ? images.length - 1 : count;

  $('.product_image img').fadeTo(300, 0).delay(400).queue(function(next) {
    $(this).attr('src', images[count]);
    next();
  }).fadeTo(300, 1);
});

.navigation {
  display: block;
}
.navigation .previous,
.navigation .next {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #ddd;
  color: #fff;
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}
.navigation .next {
  margin-right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="product_image">
  <img src="http://i.imgur.com/U82gG8H.jpg" />
</div>
<div class="navigation">
  <div class="previous">&lt;</div>
  <div class="next">&gt;</div>
</div>

Answer 4

尝试这种方法

$(img).fadeTo(200,0.70, function() {
        $(img).attr("src", new_img_src);
   }).fadeTo(300,1);

Answer 5

根据此answer：当前正在进行的动画立即完成，并且当前动画已开始。

var images = ['http://i.imgur.com/U82gG8H.jpg', 'http://i.imgur.com/kVy4G4R.jpg', 'http://i.imgur.com/BtMikrd.jpg'];

var count = 0;

$('.next').on('click', function() {
  if (count !== images.length-1) {
    count++;
    $('.product_image img').fadeTo(300, 0).delay(600).attr('src', '').attr('src', images[count]).finish().fadeTo(300, 1);
  }
});

$('.previous').on('click', function() {
  if (count !== 0) {
    count--;
    $('.product_image img').fadeTo(300, 0).delay(400).attr('src', '').attr('src', images[count]).finish().fadeTo(300, 1);
  }
});

.navigation {
  display: block;
}
.navigation .previous,
.navigation .next {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #ddd;
  color: #fff;
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}
.navigation .next {
  margin-right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="product_image">
  <img src="http://i.imgur.com/U82gG8H.jpg" />
</div>
<div class="navigation">
  <div class="previous">&lt;</div>
  <div class="next">&gt;</div>
</div>

Answer 6

完成时可以使用.fadeOut()和回调函数，如：

＆＃13;

var images = ['http://i.imgur.com/U82gG8H.jpg', 'http://i.imgur.com/kVy4G4R.jpg', 'http://i.imgur.com/BtMikrd.jpg'];

var count = 0;

$('.next').on('click', function() {
  if (count !== images.length - 1) {
    count++;
    $('.product_image img').fadeOut(300, function() {
      $(this).attr('src', '').attr('src', images[count]).fadeTo(300, 1);
    });
  }
});

$('.previous').on('click', function() {
  if (count !== 0) {
    count--;
    $('.product_image img').fadeOut(300, function() {
      $(this).attr('src', '').attr('src', images[count]).fadeTo(300, 1);
    });
  }
});

＆＃13;

.navigation {
  display: block;
}
.navigation .previous,
.navigation .next {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #ddd;
  color: #fff;
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}
.navigation .next {
  margin-right: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="product_image">
  <img src="http://i.imgur.com/U82gG8H.jpg" />
</div>
<div class="navigation">
  <div class="previous">&lt;</div>
  <div class="next">&gt;</div>
</div>

＆＃13;

更改图像属性更改的不透明度？

6 个答案:

使用回调函数

示例