1

作業中の Web サイト用に小さなアニメーションを作成しようとしていますが、作成した方法では、マウスをコンテナー div の上に移動すると、アニメーションがまだ発生します。マウスが実際にホバリングしていないことを認識させるにはどうすればよいですか?

HTML コードは次のとおりです。

<div id="badge">
    <div id="slogan">
        <p>We sell for less!</p>
    </div>
    <div id="icon"></div>
    <div id="name"></div>
    <div id="TMhold">
        <div id="TM"></div>
    </div>
</div>

これは私が使用しているjQueryです：

$("#badge").hover(
    function() {
        $(this).stop(true,true).animate({width: "250px"}, 760, "easeOutQuart");
        setTimeout(function() {
            $("#TM").stop(true,true).animate({top: "0"}, 500, "easeOutQuart");
        }, 500 );
        setTimeout(function(pee) {
            $('#badge p').stop(true,true).animate({opacity: .99}, 760, "easeOutQuart");
        }, 800 );
    },
    function() {
        clearTimeout(pee);
        $('#badge p').stop(true,true).animate({opacity: 0}, 120, "easeOutQuart");
        setTimeout(function() {
            $('#badge').stop(true,true).animate({width: "90px"}, 900, "easeOutQuart");
            $("#TM").stop(true,true).animate({ top: "-13px"}, 500, "easeOutQuart");
        }, 300 );   
    }
);

clearTimeout 関数について読んだことがありますが、それが私の解決策としてこれに当てはまるかどうかはわかりません。

助けや説明をありがとう！

4

1 に答える 1

0

JavaScript のレイアウトを再配置して、実際に何が起こっているかを確認するのに少し時間を費やしました。このsetTimeoutメソッドは、設定されているタイマーを表す値を返します。この値を取得しないと、タイマーをキャンセルできません。

を呼び出す代わりにsetTimeout( function(pee)...、戻り値をキャプチャするように変更し、その値をclearTimeout呼び出しで使用します。

var hoverTimerId;

$("#badge").hover(
    function(){
        $(this).stop(true,true).animate({width: "250px"}, 760, "easeOutQuart");
        setTimeout(function() {
            $("#TM").stop(true,true).animate({top: "0"}, 500, "easeOutQuart");
        }, 500);
        hoverTimerId = setTimeout(function() {
           $('#badge p').stop(true,true).animate({ opacity: .99}, 760, "easeOutQuart");
        }, 800);
    },
    function(){
        clearTimeout(hoverTimerId);
        $('#badge p').stop(true,true).animate({opacity: 0}, 120, "easeOutQuart");

        setTimeout(function() {
            $('#badge').stop(true,true).animate({ width: "90px"}, 900, "easeOutQuart");
            $("#TM").stop(true,true).animate({top: "-13px"}, 500, "easeOutQuart");
        }, 300);
    }
);

handlerIn注: タイマー ID はとコールバックの両方で使用できる必要があるため、メソッド呼び出しhandlerOutの外部でグローバル変数にしました。呼び出しhover内でそれを定義して、引き続き機能させることができます。hoverどちらの方法でもテストしていません。

于 2012-03-13T17:28:02.123 に答える