0

私はこのコードを持っています:

$(document).ready(function(){
     $('.first').mouseenter(function(){
         $(this).animate({
             top: '115px'
         }, 500 );
     });
     $('.first').mouseleave(function(){
         $(this).animate({
         top: '127px'
         }, 500 );
     });
 });

そして、それを実行すると、.first divが少なくとも2回上下しますが、それ以上ではないのですが、なぜそうなるのかわかりません。

ありがとう

4

1 に答える 1

3

アニメーションを作成したくない場合は、アニメーションを追加する前にアニメーション キューを停止する必要があります: http://jsfiddle.net/bgjxk/

$(document).ready(function(){
     $('.first').mouseenter(function(){
         $(this).stop().animate({
             top: '115px'
         }, 500 );
     });
     $('.first').mouseleave(function(){
         $(this).stop().animate({
         top: '127px'
         }, 500 );
     });
});​

アニメーション キューを気にせずに、CSS3 トランジションを使用して同じことをよりスムーズに行うこともできます: http://jsfiddle.net/bgjxk/1/

.first{
    ...
    position:absolute;
    top:127px;
    transition:top .25s linear; /* use them vendor prefixes */
}
.first:hover{
    top:115px;
}
于 2012-12-20T23:25:28.433 に答える