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

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 的回调函数，否则图像会同时淡出、更改和淡入。试试这个:

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

.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>