开发者

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 ){
        }
    });
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜