jQuery CSS不透明度動畫

Question

因此，我嘗試創建一個簡單的褪色幻燈片，其中包含五張幻燈片，並在完成后重復播放。

我覺得我所擁有的應該起作用，但事實並非如此。

<script type="text/javascript">

    $(document).ready(function() {

        function playslide(){

            setTimeout(function(){
            $("#slide-two").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 10000);
            setTimeout(function(){
            $("#slide-three").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 20000);
            setTimeout(function(){
            $("#slide-four").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 30000);
            setTimeout(function(){
            $("#slide-five").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 2000, 'swing')}, 40000);

        }

        playslide();

        });
</script>

這個想法是，第一張幻燈片的不透明度將始終設置為1，因此當最后一張幻燈片淡出時，就好像它在重新開始一樣。 每張幻燈片在淡出之前將保持10秒鍾，每張幻燈片淡入后，上一張幻燈片的不透明度將重新設置為0，以備下次重復使用。

我希望這不是一個明顯的錯誤。 抱歉，如果...

Answer 1

請為什么不使用.fadeIn()和.fadeOut()代替呢？

setTimeout(function () {
  $("#slide-two").fadeIn(400, function () {
    setTimeout(function () {
      $("#slide-two").fadeOut(function () {
      $("#slide-three").fadeIn(400, function () {
        // So on...
      });
    }, 1000);
  });
}, 1000);

最好使用這些功能來執行此操作，而不是手動為不透明度設置動畫。

Answer 2

https://jsfiddle.net/sk8ruo3u/

這是我會做的

var list = ['.one','.two','.three','.four'];

$.each(list, function(index, value){
    changeOpacity(value, index*1000);    
});

function changeOpacity(target, timeout) {
    setTimeout(function () {
        $(target).animate({
            opacity: 0.05
        }, 1000);
    }, timeout);
};