鼠标进入时继续滚动答案

【问题标题】：keep scrolling when mouse enter鼠标进入时继续滚动
【发布时间】：2012-02-26 21:52:58
【问题描述】：

我该怎么做？

    $('#forward').mouseenter(
        function() {
            $("#scroller").trigger("slideTo", [1, "next"]);         
        }
    );

    $('#backward').mouseenter(
        function() {
            $("#scroller").trigger("slideTo", [1, "back"]);         
        }
    );

它应该在我的鼠标在按钮顶部时继续滚动，而当我的鼠标在按钮之外时它将停止滚动。显然它只会滚动一次然后停止。我需要悬停激活按钮，这样用户就不会一直点击按钮。

参考：http://caroufredsel.frebsite.nl/code-examples/custom-events.php

【问题讨论】：

标签： javascript jquery hover mouseevent carousel

【解决方案1】：

我相信你正在寻找这个http://jsfiddle.net/DNcAS/3/

$("#foo2").carouFredSel({
    auto    : {
        button          : "#foo2_play"
    },
    scroll  : {
        items           : 1,
        duration        : 1000,
        pauseDuration   : 0
    }
}).trigger("pause");


 $('#foo2_next').mouseenter(
        function() {
            $("#foo2").trigger("configuration", ["direction", "left"])
                      .trigger("play");
        }).mouseleave(function(){
            $("#foo2").trigger("pause"); 
        });

 $('#foo2_prev').mouseenter(
        function() {
            $("#foo2").trigger("configuration", ["direction", "right"])
                      .trigger("play");
        }).mouseleave(function(){
            $("#foo2").trigger("pause"); 
        });

对于线性滚动修改配置选项为http://jsfiddle.net/DNcAS/4/

scroll  : {
    items           : 1,
    duration        : 1000,
    easing          : "linear",
    pauseDuration   : 0
}

或者您可以将mouseenter 和mouseleave 替换为hover http://jsfiddle.net/DNcAS/5/

ps：更短的版本http://jsfiddle.net/DNcAS/6/

 $('#foo2_next,#foo2_prev').hover(function() {
            var dir = $(this).hasClass('next') ? 'left' : 'right'; 
            $("#foo2").trigger("configuration", ["direction", dir])
                      .trigger("play");
        }, function(){
            $("#foo2").trigger("pause"); 
        });

【讨论】：

是的，这正是我正在寻找的。非常感谢 Cheery！

【解决方案2】：

你的意思是这样的吗？

var forwardInterval;
$('#forward').mouseenter(
    function() {
        forwardInterval = setInterval(function() {
             $("#scroller").trigger("slideTo", [1, "next"]);         
        }, 1000);
    }
);
$('#forward').mouseleave(
    function() {
        clearInterval(forwardInterval);
    }
);

【讨论】：

嗨 Dmitry Nogin，感谢您的回答，但我不确定为什么它对我不起作用。它正在正确调用该函数，但它没有连续触发。它只运行一次。