How to use jQuery SerialScroll with mouseover/mouseenter event?
I have this question about using SerialScroll with something else than click event.
See, I want to activate the scroll once someone is on the next/prev "button". I guessed I should use :
event:'mouseenter'
in the parameters of the SerialScroll.
Well, it start well, but it never ends until it go to the end of the list.
So I tried to tied up the mouseover event to trigger a click and the mouseleave to stop the scroll... Unfortunately... it didn'开发者_开发知识库t work..
Any hints would be much appreciated !
The code is as follow :
jQuery(".prevline").bind('mouseover',function(){
jQuery(this).trigger('click');});
jQuery(".nextline").bind('mouseover',function(){
jQuery(this).trigger('click');});
jQuery(".prevline").bind('mouseleave',function(){
jQuery("#tagline").stop().trigger('stop');});
jQuery(".nextline").bind('mouseleave',function(){
jQuery("#tagline").stop().trigger('stop');});
jQuery('#tagline').serialScroll({
items:'li',
prev:'.prevline',
next:'.nextline',// Selector to the 'next' button (absolute too)
axis:'y',// The default is 'y' scroll on both ways
//navigation:'#navigation li a',
duration:1000,
force:true,
//queue:false,// We scroll on both axes, scroll both at the same time.
event:'click',
stop:true,// Each click will stop any previous animations of the target. (false by default)
lock:true, // Ignore events if already animating (true by default)
//start: 0,
//cycle:true,
//step:1,
jump:false,
//lazy:false,
//interval:1000,
//constant:true,
onBefore:function( e, elem, $pane, $items, pos ){
/**
* 'this' is the triggered element
* e is the event object
* elem is the element we'll be scrolling to
* $pane is the element being scrolled
* $items is the items collection at this moment
* pos is the position of elem in the collection
* if it returns false, the event will be ignored
*/
//those arguments with a $ are jqueryfied, elem isn't.
e.preventDefault();
if( this.blur )
this.blur();
},
onAfter:function( elem ){
//'this' is the element being scrolled ($pane) not jqueryfied
}
});
Simply removing all my event and configure the plugin in an other way made it work :
jQuery('#tagline').serialScroll({
items:'li',
prev:'.prevline',
next:'.nextline',
axis:'y',// The default is 'y' scroll on both ways
duration:1200,
force:true,
event:'mouseover',
stop:true,// Each click will stop any previous animations of the target. (false by default)
lock:true, // Ignore events if already animating (true by default)
cycle:false,
jump:false,
onBefore:function( e, elem, $pane, $items, pos ){
e.preventDefault();
if( this.blur )
this.blur();
},
onAfter:function( elem ){
}
});
精彩评论