0

マウスが上にあるときにこのアニメーションを停止する方法がわかりません

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

4

3 に答える 3

2

これはあなたが必要とする効果ですか：http：//jsfiddle.net/xRcwH/24/？

于 2012-08-23T07:21:19.003 に答える
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 に答える
1

ここにもコードを投稿する必要がありますが、停止する理由は次のとおりです。

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

それ以外の

$this.stop();

アニメーションはマーキー内の div にあるためです。

于 2012-08-23T07:55:23.223 に答える