jQuery 淡入和淡出消息列表

Question

我尝试修改下面的代码以淡出消息列表，我需要它在最后一条消息处停止，我设法做到了，但最后一条消息不断淡入和淡出，我不知道如何防止它像暗淡的灯泡一样褪色。<script>jQuery(function($) {$(document).ready(function(){      $("button").click(function(){    $("#demo").fadeTo( "slow", 1 );        (function($){        $.fn.extend({            rotaterator: function(options) {                var defaults = {                    fadeSpeed: 500,                    pauseSpeed: 100,                    child:null                };                var options = $.extend(defaults, options);                return this.each(function() {                      var o =options;                      var obj = $(this);                      var items = $(obj.children(), obj);                      items.each(function() {$(this).hide();})                      if(!o.child){var next = $(obj).children(':first');                      }else{var next = o.child;                      }                      $(next).fadeIn(o.fadeSpeed, function() {                            $(next).delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function() {                                var next = $(this).next();                                if (next.length == 0){                                        next = $(obj).children(':last');                                }                                $(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed});                            })                        });                });            }        });    })(jQuery);     $(document).ready(function() {            $('#rotate').rotaterator({fadeSpeed:500, pauseSpeed:100});     });      });    });});</script>    <button class="btn" type="submit" style="min-width: 200px;margin-top: 40px;margin-bottom: 0px;" onclick="myFunction()">Sign Up!</button>    <h1 id="demo" style="opacity:0;"> I am <div id="rotate"> <div>awesome.</div> <div>invincible.</div> <div>unbeatable.</div> <div>indestructible.</div> </div> </h1>

Answer 1

这是一些非常奇特的代码！我可能会尝试一个更简单的解决方案，但你拥有的是一个漂亮且灵活的 jQuery 函数。

这是代码的 JSFiddle，仅进行了一项更改 - 在显示最后一个元素后停止动画，这正是您所需要的。

问题是这段代码：

if (next.length == 0) {
    next = $(obj).children(':last');
}

表示当没有要设置动画的“下一个”元素时，请使用要设置动画的集合中的最后一个元素（#rotate在您的示例中）。因此，一旦它到达最后一个项目并且找不到另一个项目，它就会循环，重新激活最后一个项目，并且永远不会停止。

为了解决这个问题，我：

• 删除了上面显示的代码；

• 添加了一个新的测试，以便当我们要设置动画的项目是集合中的最后一个项目时，在将其淡出并寻找另一个淡入之前尽早退出。为了进行该测试，我.index()在设置，并将其与元素总数进行比较。索引是从零开始的，而计数当然不是从零开始的，所以我需要在索引值上加 1：

  if (next.index() +1 === items.length) {
      return;
  }

现在您的代码可以按您的预期运行。

但是该代码有一些问题需要修复：

• 该按钮有一个onclick="myFunction()"，但myFunction()未定义。AFAICT buttonJS 中的点击处理程序就是您所需要的，并且比使用内联onClick处理程序更好，所以我删除了它。

• AFAIKjQuery(function($) {和$(document).ready(function() {基本上是相同的，并且应该只使用一个。

• 同样，无需将 jQuery 函数定义包装在另一个自执行的(function($) {.

• 不应在单击处理程序内定义 jQuery 函数定义。

• 对 run 的实际调用rotaterator()包装在 a 内$(document).ready(function() {，但代码已经嵌套在其中另一个内，它们不应该像那样嵌套/加倍。

• 小事 - 该next变量被定义为 jQuery 对象，因此您可以像使用它一样next.fadeIn()，而无需像使用它一样$(next)。

• 在点击处理程序中，此代码会淡入整个 h1：

  $("#demo").fadeTo("slow", 1);

  我猜你有一些 CSS 使它最初不可见？我已经添加了。

这是另一个包含所有这些更改的 JSFiddle。