如何在调整窗口大小时重新运行这个jQuery插件？
如何在调整窗口大小时重新运行这个jQuery插件？
提问于 2018-06-01 22:38:52
我有一个列表，其中第一个子元素在桌面上可见，在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
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-03 02:42:22
只要淡出完成并且下一次调用rotaterator，您当前的实现就已经适应了新的窗口大小。
但是，如果希望在调整大小事件中立即生效，以便动画重新开始时考虑到新窗口的大小，请使用jQuery stop方法停止ul子元素的任何当前动画。
例如：
$(window).resize(function() {
$('ul *').finish();
$('ul').rotaterator({fadeSpeed:5000, pauseSpeed:1000});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50645873
复制相关文章
相似问题