javascript - 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 函数。

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

问题是这段代码:

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

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

为了解决这个问题，我:

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

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

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

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

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

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

• AFAIK jQuery(function($) { 和 $(document).ready(function() { 基本相同，只有一个应该是使用过。

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

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

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

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

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

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

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

Here's another JSFiddle 进行所有这些更改。