jquery - 使用 jquery 创建迭代淡入淡出函数的最有效方法是什么

Question

我在jquery中编写了一个淡入淡出函数，它工作得很好，但看起来好像有一种更优雅的方式来编写它。初始不透明度设置为空。这是我所拥有的:

 $('span[data-i18n="text.about"]').click(function () {
    $('#one').fadeTo(2000, 1, function() {
        $('#one').fadeTo(2000, 0, function() {
            $('#two').fadeTo(2000, 1, function() {
                $('#two').fadeTo(2000, 0, function() {
                    $('#three').fadeTo(2000, 1, function() {
                        $('#three').fadeTo(2000, 0, function() {
                            $('#four').fadeTo(2000, 1, function() {
                                $('#four').fadeTo(2000, 0,  function() {
                                    $('#five').fadeTo(2000, 1, function() {
                                        $('#five').fadeTo(2000, 0, function() {
                                            $('#six').fadeTo(2000, 1, function() {
                                                $('#six').fadeTo(2000, 0, function() {
                                                    $('#seven').fadeTo(2000, 1, function() {
                                                        $('#seven').fadeTo(2000, 0, function() {
                                                            $('#eight').fadeTo(2000, 1, function() {
                                                                $('#eight').fadeTo(2000, 0);         
                                                            }); 
                                                        });        
                                                    });            
                                                });            
                                            });         
                                        });          
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    })
});

知道如何美化/缩短这个函数吗？

Answer 1

由于所有元素都遵循相同的行为(即淡入两秒，然后淡出两秒)，您可以将所有动画放入循环中，在每个连续元素上迭代延迟四秒。

为了使事情变得更简单，您可以对它们应用一个公共(public)类。像这样的事情:

$('span[data-i18n="text.about"]').click(function() {
  $('.fade-queue').each(function(i) {
    $(this).delay(i * 4000).queue(function() {
      $(this).fadeTo(2000, 1).dequeue();
    }).queue(function() {
      $(this).fadeTo(2000, 0).dequeue();
    });
  });
});

div { 
  opacity: 0; 
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-i18n="text.about">Click me</span>

<div class="fade-queue" id="one">One</div>
<div class="fade-queue" id="two">Two</div>
<div class="fade-queue" id="three">Three</div>
<div class="fade-queue" id="four">Four</div>
<div class="fade-queue" id="five">Five</div>
<div class="fade-queue" id="six">Six</div>
<div class="fade-queue" id="seven">Seven</div>
<div class="fade-queue" id="eight">Eight</div>

另请注意，此方法不再依赖 id属性都没有。因此，它更容易维护和扩展，因为您只需添加更多 <div class="fade-queue">无需更改任何 JS 代码即可将元素添加到 HTML。