0

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

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

4

3 回答 3

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

于 2012-08-23T07:50:37.687 回答
2

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

于 2012-08-23T07:21:19.003 回答
1

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

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

代替

$this.stop();

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

于 2012-08-23T07:55:23.223 回答