使用 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

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

为了简化操作，您可以对它们全部应用通用的 class。像这样：

$('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 属性。因此，它更易于维护和扩展，因为您只需向 HTML 添加更多 <div class="fade-queue"> 元素，而无需更改任何 JS 代码。

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

What is the most efficient way to create an iterative Fade-In-Out Function with jquery

performance

jquery

fade

fadeout

fadein