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&nbsp;(next.length&nbsp;==&nbsp;0)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;next&nbsp;=&nbsp;$(obj).children(':last'); }表示当没有要设置动画的“下一个”元素时，请使用要设置动画的集合中的最后一个元素（#rotate在您的示例中）。因此，一旦它到达最后一个项目并且找不到另一个项目，它就会循环，重新激活最后一个项目，并且永远不会停止。为了解决这个问题，我：删除了上面显示的代码；添加了一个新的测试，以便当我们要设置动画的项目是集合中的最后一个项目时，在将其淡出并寻找另一个淡入之前尽早退出。为了进行该测试，我.index()在设置，并将其与元素总数进行比较。索引是从零开始的，而计数当然不是从零开始的，所以我需要在索引值上加 1：if&nbsp;(next.index()&nbsp;+1&nbsp;===&nbsp;items.length)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return; }现在您的代码可以按您的预期运行。但是该代码有一些问题需要修复：该按钮有一个onclick="myFunction()"，但myFunction()未定义。AFAICT&nbsp;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",&nbsp;1);我猜你有一些 CSS 使它最初不可见？我已经添加了。这是另一个包含所有这些更改的 JSFiddle。