0

top要素のホバー イベントとクリック イベントの両方を同じ (この場合は) プロパティでアニメーション化しようとしています。

このフィドルを見てください：http://jsfiddle.net/XC9Xu/1/

上部にとのa固定があります。top:-50pxheight=100px

1-ホバーすると、トップがアニメーション化しtop=0、マウスリーブトップがtop=-50再びなります。

2- クリック時: アニメーション化top=200px

問題は、クリックしてカーソルを動かさないことです。すべて問題ありませんが、カーソルを動かすとすぐに、次のように表示されますtop=-50px。 D

過去のことは忘れて、未来を見ろ、と伝えなきゃ！

私が期待すること: クリック後に要素が残り、クリック後にマウスを動かしてもtop=300px元に戻らないことを期待しています。top=-50px次に、カーソルをその上に再度移動すると、その上部が 300 から 0 に移動します...

$(document).ready(function(){

    $('a')
    .hover(
        function(){
            $(this).animate({top:0});
        },
        function(){
            $(this).animate({top:-50});
        }
    )
    .on("click",function(){
        $(this).animate({top:300});
    });

});

 a{
    display:block;
    position:fixed;
    top:-50px;
    left:0;
    width:100%;
    height:100px;
    background:#ccc;
}
4

2 に答える 2

1

フラグを設定し、それを使用してホバー機能を有効/無効にします。

このフィドルを参照してください

var click_triggered = false;

$(document).ready(function(){

    $('a')
    .hover(
        function(){
            if(!click_triggered){
                $(this).animate({top:0});
            }
        },
        function(){
            if(!click_triggered){
                $(this).animate({top:-50});
            }
        }
    )
    .on("click",function(){
        click_triggered = true;
        $(this).animate({top:300});       
    });

});

または、2 回目のクリック後に元に戻したい場合は、次のクリック ハンドラーのようにします。

    .on("click",function(){
        click_triggered = !click_triggered;
        $(this).animate({top:300});       
    });
于 2013-11-05T18:45:46.373 に答える
0

これはトリックを行います

$(document).ready(function(){
     reduceHeight =  function(){
            $(this).animate({top:-50});
     };

    $('a')
    .hover( function(){
            $(this).animate({top:0});
            $(this).bind('mouseleave', reduceHeight);
     })
    .click( function(){
        $(this).unbind('mouseleave');
        $(this).animate({top:300});
    });

});
于 2013-11-05T19:08:02.390 に答える