2

同様の質問がいくつかあることは知っていますが、それらの解決策を試していますが、うまくいきません。

#hitboxクリックすると、以下のコールバック アニメーションを停止するにはどうすればよいですか? アニメーションで#hitboxは、 をホバ​​ーすると div が外側に移動し、マウスを#hitbox離すと div が元の位置に戻ります。#hitboxdivがクリックされた後、元に戻るのではなく、外側の位置にとどまるようにします。

var timeOut;
$('#hitbox').hover(
            function() {  
                 clearTimeout(timeOut);

    // **some animation functions moving divs outward** e.g.:
    $('#div').stop().animate(
    {
   'margin-left': '-500px',   
    }, 1000, 'easeOutQuart'  
    ); 

                     } // End first function

    ,

            function() {
                timeOut=setTimeout(function(){

    // **some animation functions moving divs back in** e.g.:
    $('#div').animate(
    {  
    'margin-left':'0px',
    }, 900, 'easeOutExpo'  );

                }, 600); //end setTimeout

            } //end second callback function
); //end hover

$('#hitbox').click(function() {
    $('#hitbox').css(
             {'display': 'none',
             });

clearTimeout(timeOut);  // *****NOT WORKING*****


}); // end click

がクリックされる#hitboxと、div は上に移動しますが、正確に外側の位置にとどまらせたい場合は収縮します (内側に戻ります)。

clearTimeout(timeOut); 他のいくつかの質問で示唆されているように機能していません。それよりももう少し必要な気がしますか？コードでわかるように、すぐにの表示も に設定してみ#hitboxましたnone。助けてくれてありがとう！

4

2 に答える 2

2

clickedにクラスを追加できます。これを使用して、ハンドラー#hitboxの内容を実行する必要があるかどうかを確認できます。mouseleave

$('#hitbox').click(function() {
    $(this).css({
        'display': 'none',
    });
    $(this).addClass('clicked');
});

メソッドの 2 番目のハンドラーは次のhoverようになります。

function() {

    if($(this).is(":not(.clicked)")){
        timeOut=setTimeout(function(){  // setTimeout method retained instead of using delay() 
        // **some animation functions moving divs back in** e.g.:
        $('#div')/*.delay(600)*/.animate({ // delay removed due to issues w/ animation queue buildup
            'margin-left': '0px',
        }, 900, 'easeOutExpo');

       }, 600); //end setTimeout
    } // end  if()

} // end hover
于 2012-12-19T23:55:08.663 に答える
1

私は@Asadの答えが好きですが、クリックすると消えるように見えるので、本当にホバー（ ）イベント#hitboxのバインドを解除したいだけですか？mouseleaveもしそうなら、これを置き換えるだけです：

clearTimeout(timeOut);  // *****NOT WORKING*****

これとともに：

$('#hitbox').unbind('mouseleave');

編集：

ここにjsFiddleがあります。

(この簡単なデモを機能させるために、四角形を追加し、readyハンドラー内にコードを追加し、easeOutパラメーターを削除し、アニメーションの方向を変更しました。)

于 2012-12-20T00:04:45.640 に答える