Question

我不知道如何在鼠标悬停时停止播放动画

Answer 1

Answer 2

以下希望可以像你想要的那样工作：

var $marquee;

var reset = function() {
    "use strict";
    $marquee.css("margin-left", "0%");
    $marquee.animate({ "margin-left": "-100%" }, 4000, 'linear', reset);
};

var func = function() {
    "use strict";
    $marquee = $("#marquee");
    $marquee.css({"overflow": "hidden", "width": "100%"});
    $marquee.wrapInner("<span>");
    $marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align": "right" });
    $marquee.append($marquee.find("span").clone());
    $marquee.wrapInner("<div>");
    $marquee.find("div").css("width", "200%");
    reset.call($marquee.find("div"));
};

$(function() {
    "use strict";
    func();

    $marquee.hover(
        function() {
            $(this).stop();
        },
        function() {
            $(this).animate({ "margin-left": "-100%" }, 4000, 'linear', reset);
        }
    );
});

请在此处查看更新的小提琴：http://jsfiddle.net/xRcwH/27/

我已经清理了你的代码并移动了一些东西。 reset函数不应该在函数func中声明，所以我把它移出了。

此外我改变了：

marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" });

到

$marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align": "right" });

因为这使它在整个屏幕上都有动画效果。

最后我使用.hover()，因为这是它的用途，.hover()与做法相同：

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

Answer 3

你也应该在这里发布你的代码，但这就是让它停止的原因：

$(this).find('div').stop();

而不是

$this.stop();

因为动画位于选框内的div上。

停止动画然后重新启动它

3 个答案: