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 Обработчик щелчков button в JS - это все, что вам нужно, и это лучшая практика, чем использование встроенных обработчиков 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, что делает его изначально невидимым? Я добавил это.

Вот еще один JSFiddle со всеми этими изменениями.