是否可以在mouseenter上暂停jQuery list

是否可以在mouseenter上暂停jQuery list_ticker插件？(Is it possible to pause the jQuery list_ticker plugin on mouseenter?)

我使用list_ticker插件滚动浏览一些列表元素。

我想知道当鼠标悬停在它上面时是否有可能暂停滚动条，这样用户就有时间阅读内容（它只是几个字，但它们包含某人可能想要注意的日期和时间）。

谢谢你的期待。

jQuery函数：

/* List Ticker by Alex Fish // www.alexefish.com // // options: // // effect: fade/slide // speed: milliseconds */ (function($){ $.fn.list_ticker = function(options){ var defaults = { speed:4000, effect:'slide' }; var options = $.extend(defaults, options); return this.each(function(){ var obj = $(this); var list = obj.children(); list.not(':first').hide(); setInterval(function(){ list = obj.children(); list.not(':first').hide(); var first_li = list.eq(0) var second_li = list.eq(1) if(options.effect == 'slide'){ first_li.slideUp(); second_li.slideDown(function(){ first_li.remove().appendTo(obj); }); } else if(options.effect == 'fade'){ first_li.fadeOut(function(){ second_li.fadeIn(); first_li.remove().appendTo(obj); }); } }, options.speed) }); }; })(jQuery);

使用Javascript：

$(document).ready(function() { $('#next-ex').list_ticker({ speed: 6000, effect: 'fade' }); });

HTML：

<ul id='next-ex'> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

I am using the list_ticker plugin to scroll through some list elements.

I was wondering if it was possible to pause the ticker when the mouse hovers over it so a user has time to read the contents (it's only a few words, but they include a date and time that someone might want to make note of).

Thanks for looking.

jQuery function:

/* List Ticker by Alex Fish // www.alexefish.com // // options: // // effect: fade/slide // speed: milliseconds */ (function($){ $.fn.list_ticker = function(options){ var defaults = { speed:4000, effect:'slide' }; var options = $.extend(defaults, options); return this.each(function(){ var obj = $(this); var list = obj.children(); list.not(':first').hide(); setInterval(function(){ list = obj.children(); list.not(':first').hide(); var first_li = list.eq(0) var second_li = list.eq(1) if(options.effect == 'slide'){ first_li.slideUp(); second_li.slideDown(function(){ first_li.remove().appendTo(obj); }); } else if(options.effect == 'fade'){ first_li.fadeOut(function(){ second_li.fadeIn(); first_li.remove().appendTo(obj); }); } }, options.speed) }); }; })(jQuery);

Javascript:

$(document).ready(function() { $('#next-ex').list_ticker({ speed: 6000, effect: 'fade' }); });

HTML:

<ul id='next-ex'> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

最满意答案

显然，这个插件中没有内置的功能。 这里有两个选项：谷歌更高级的插件或快速和脏修补。

(function($){ $.fn.list_ticker = function(options){ var defaults = { speed:4000, effect:'slide' }; var options = $.extend(defaults, options); return this.each(function(){ var obj = $(this); var list = obj.children(); var stopped = false; //flag if we should stop ticking list.not(':first').hide(); obj.hover( function(){ //adding hover behaviour stopped = true; }, function(){ stopped = false; }); setInterval(function(){ if(stopped) {return;} //Quick check inside interval list = obj.children(); list.not(':first').hide(); var first_li = list.eq(0) var second_li = list.eq(1) if(options.effect == 'slide'){ first_li.slideUp(); second_li.slideDown(function(){ first_li.remove().appendTo(obj); }); } else if(options.effect == 'fade'){ first_li.fadeOut(function(){ second_li.fadeIn(); first_li.remove().appendTo(obj); }); } }, options.speed) }); }; })(jQuery);

工作示例http://jsfiddle.net/tarabyte/8zLuY/

Obviously there is no such functionality built in this plugin. Two options here: google for more advanced plugin or quick and dirty patching.

(function($){ $.fn.list_ticker = function(options){ var defaults = { speed:4000, effect:'slide' }; var options = $.extend(defaults, options); return this.each(function(){ var obj = $(this); var list = obj.children(); var stopped = false; //flag if we should stop ticking list.not(':first').hide(); obj.hover( function(){ //adding hover behaviour stopped = true; }, function(){ stopped = false; }); setInterval(function(){ if(stopped) {return;} //Quick check inside interval list = obj.children(); list.not(':first').hide(); var first_li = list.eq(0) var second_li = list.eq(1) if(options.effect == 'slide'){ first_li.slideUp(); second_li.slideDown(function(){ first_li.remove().appendTo(obj); }); } else if(options.effect == 'fade'){ first_li.fadeOut(function(){ second_li.fadeIn(); first_li.remove().appendTo(obj); }); } }, options.speed) }); }; })(jQuery);

Working example http://jsfiddle.net/tarabyte/8zLuY/