jquery - 停止动画然后重新启动它

Question

我不知道当鼠标悬停在它上面时如何停止这个动画

http://jsfiddle.net/xRcwH/14/

Answer 1

希望以下内容可以像您希望的那样工作：

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 2

这是您需要的效果吗：http: //jsfiddle.net/xRcwH/24/？

Answer 3

您还应该在此处发布您的代码，但这就是它停止的原因：

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

代替

$this.stop();

因为动画在选框内的 div 上。