0

私はこの小さなjqueryを作成しました。これには、ホバー効果があります。

ただし、特定のマウスホバーでは、アニメーション効果のループを引き起こすように見えるため、scciptに障害があるように見えます。（ほとんどの場合、2番目と3番目のdivの間をホバーすると）

誰かがこの問題を修正する方法を提案していますか？

http://test.gifix.de/index.php

問題の説明が不十分で申し訳ありませんが、例に少しカーソルを合わせると必ず表示されます;）

すべての助けをありがとう、

スコット

4

2 に答える 2

0

divのクラスを使用することで、これを行う方法を単純化できると思います。JSFiddleを設定しました。それはあなたがやろうとしていることを達成しますか？

于 2012-07-06T22:20:34.880 に答える
0

アニメーションがキューに入れられています。これを防ぐには、jQueryの停止関数を使用します：http：//api.jquery.com/stop/

停止機能の使用を含むようにコードを更新しました。今ではうまくいきます。更新されたコードは次のとおりです。

<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('#blue-top').mouseenter(function(){
    $('#blue-top').stop(true).animate({height:'200'}, 500);
    $('#blue-middle').stop(true).animate({height:'80'}, 500);
    $('#blue-bottom').stop(true).animate({height:'80'}, 500);
});
$('#blue-top').mouseleave(function(){
    $('#blue-top').stop(true).animate({height:'120'}, 500);
    $('#blue-middle').stop(true).animate({height:'120'}, 500);
    $('#blue-bottom').stop(true).animate({height:'120'}, 500);
});

$('#blue-middle').mouseenter(function(){
    $('#blue-top').stop(true).animate({height:'80'}, 500);
    $('#blue-middle').stop(true).animate({height:'200'}, 500);
    $('#blue-bottom').stop(true).animate({height:'80'}, 500);
});
$('#blue-middle').mouseleave(function(){
    $('#blue-top').stop(true).animate({height:'120'}, 500);
    $('#blue-middle').stop(true).animate({height:'120'}, 500);
    $('#blue-bottom').stop(true).animate({height:'120'}, 500);
});

$('#blue-bottom').mouseenter(function(){
    $('#blue-top').stop(true).animate({height:'80'}, 500);
    $('#blue-middle').stop(true).animate({height:'80'}, 500);
    $('#blue-bottom').stop(true).animate({height:'200'}, 500);
});
$('#blue-bottom').mouseleave(function(){
    $('#blue-top').stop(true).animate({height:'120'}, 500);
    $('#blue-middle').stop(true).animate({height:'120'}, 500);
    $('#blue-bottom').stop(true).animate({height:'120'}, 500);
});


});//]]>  

</script>
于 2012-07-06T22:08:35.413 に答える