如何使用带有mouseover / mouseenter事件的jQuery SerialScroll?

时间:2011-02-02 18:31:41

标签: javascript jquery jquery-plugins javascript-events mouseevent

感谢您使用这个神奇的平台,我非常喜欢它。

我有一个关于将SerialScroll与click事件一起使用的问题。

看,我想在有人在下一个/上一个“按钮”时激活滚动。我猜我应该使用:

event:'mouseenter'

在SerialScroll的参数中。

嗯,它开始很好,但它永远不会结束,直到它到达列表的末尾。

所以我试图绑定鼠标悬停事件以触发单击并使用mouseleave停止滚动... 不幸的是......它不起作用..

任何提示都会非常感激!

沉没你!

代码如下:

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

1 个答案:

答案 0 :(得分:0)

只需删除我的所有活动并以其他方式配置插件即可:

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