Question

我有一个列表，其中第一个子元素在桌面上可见，并隐藏在767px下的屏幕上，然后每个其他元素在循环中循环显示所有屏幕尺寸。

我一直试图在窗口调整大小时重新运行这个jQuery插件但没有成功，请有人帮忙实现窗口调整大小功能吗？

我已经整理了example here

(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 obj2 = "ul li:first-child";                   
        var items = $(obj.children(), obj);
        var items2 = $(obj.children(), obj2);

        if ($(window).width() < 767) {
            items.each(function() {$(this).hide();})
            items2.each(function() {$(obj2).hide();})
        } else {
            items.each(function() {$(this).hide();})
            items2.each(function() {$(obj2).show();})
        }
        if(!o.child){var next = $(obj).children(':nth-child(2)');

        }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(':nth-child(2)');
                }
                $(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed});
            })
        });
    });

}
});
})(jQuery);

并致电

(function ($) {
        $('ul').rotaterator({fadeSpeed:5000, pauseSpeed:1000});
        })(jQuery);

感谢您的光临。

更新：

我添加了窗口调整大小，似乎它影响了最初加载和执行的方式，首先显示所有元素，请参阅updated fiddle demo

Answer 1

当淡出完成并且下一次调用rotaterator时，您当前的实现已经适应新的窗口大小。

如果您想在resize事件中立即生效，以便动画重新开始考虑新的窗口大小，那么使用jQuery stop方法停止ul的任何当前动画儿童元素。

例如：

$(window).resize(function() {
    $('ul *').finish();
    $('ul').rotaterator({fadeSpeed:5000, pauseSpeed:1000});
});

如何在窗口调整大小时重新运行此jQuery插件？

1 个答案: