Question

我正在尝试创建一个文本旋转器，最后在3秒内暂停，然后重复。我找到了一个相关的脚本，但在最后添加暂停时遇到了一些问题。

Codepen： http://codepen.io/AmruthPillai/pen/axvqB/

脚本：

(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(':first');
                        }
                        $(obj).rotaterator({
                            child: next,
                            fadeSpeed: o.fadeSpeed,
                            pauseSpeed: o.pauseSpeed
                        });
                    })
                });
            });
        }
    });
})(jQuery);
$(document).ready(function() {
    $('#rotate').rotaterator({
        fadeSpeed: 0,
        pauseSpeed: 100
    });
});

Answer 1

该功能已使用pauseSpeed延迟fadeOut，因此我添加了以下内容：

var nextDelay = $(next).is(':last-child') ? o.pauseSpeed + 3000 : o.pauseSpeed

我检查下一个元素.is(':last-child')是否添加3000到值o.pauseSpeed 并使用nextDelay代替o.pauseSpeed来推迟fadeOut

Working CodePen

(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() {
          var nextDelay = $(next).is(':last-child') ? o.pauseSpeed + 3000 : o.pauseSpeed
          $(next).delay(nextDelay).fadeOut(o.fadeSpeed, function() {
            var next = $(this).next();
            if (next.length == 0) {
              next = $(obj).children(':first');
            }
              $(obj).rotaterator({child: next,fadeSpeed: o.fadeSpeed,pauseSpeed: o.pauseSpeed});
          })
        });
      });
    }
  });
})(jQuery);

$(document).ready(function() {
  $('#rotate').rotaterator({
    fadeSpeed: 500,
    pauseSpeed: 100
  });
});

相关代码是：

$(next).delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function() {

我把它更改为：

  var nextDelay = $(next).is(':last-child') ? o.pauseSpeed + 3000 : o.pauseSpeed
  $(next).delay(nextDelay).fadeOut(o.fadeSpeed, function() {

$(next)：是下一个元素选择器。
.is(':last-child')：检查$(next)元素is是否为其父级的last-child
.delay(number of milliseconds)：.delay()设置计时器以延迟队列中后续项目的执行（在本例中为fadeOut）。
.fadeOut()：Hide the matched elements by fading them to transparent.
var nextDelay：使用Conditional (ternary) Operator

Answer 2

您可以使用setTimeout调用等待3秒或任何您喜欢的时间间隔。我已经更新了你的代码。查看http://codepen.io/anon/pen/XMJQYy

if (next.length == 0){
                                    next = $(obj).children(':first');
                setTimeout(function() {
                  $(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed});
                }, 2000);
                            } else {
                $(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed});
}

文本旋转器最后有暂停

2 个答案: