なぜマウス・イーブ・エフェクト後に要素が小さくなっていますか？

Question

jQuery（とweb dev自身）の新機能で、マウスオーバー時に画像を拡大してマウスオーバーを解除すると元のサイズに戻ります。しかし、私が何度もオンとオフを切り替えると、私の要素がどんどん小さくなっていくのか分かりません。これを防ぐ方法を教えてください。

jsfiddle example

事前にありがとうございます！

** #testDivは円です。

jQuery (function($) { 
 
    $('#testDiv').on('mouseenter',function() { 
 
     $(this).animate({ 
 
      height: "+=20px", 
 
      width: "+=20px", 
 
      borderRadius: "+=10px", 
 

 
     }).on('mouseleave', function() { 
 
      $(this).animate({ 
 
      height: "-=20px", 
 
      width: "-=20px", 
 
      borderRadius: "-=10px", 
 

 
      }); 
 
     }); 
 
    }); 
 
});

Answer 1

これを試してみてください： をあなたがmouseLeaveイベントを複数回引き金ようだと性質があることは、複数回のコンソールhttps://jsfiddle.net/m74262yb/2/

jQuery (function($) { 
 
    $('#testDiv').on('mouseenter',function() { 
 
    $(this).animate({ 
 
     height: "120px", 
 
     width: "120px", 
 
     borderRadius: "40px", 
 

 
    }).on('mouseleave', function() { 
 
     $(this).animate({ 
 
     height: "100px", 
 
     width: "100px", 
 
     borderRadius: "50px", 
 

 
     }); 
 
    }); 
 
}); 
 
});

を参照してください軽減しますhttps://jsfiddle.net/m74262yb/1/

あなたは、CSSトランジションを試すことができます。

CSS：

#testDiv{ 
    transition:all 0.5s; 
    width: 100px; 
    height: 100px; 
    border-radius: 50px; 
    border: 1px solid black; 
    background-color: gray; 
} 
#testDiv:hover { 

    width: 120px; 
    height: 120px; 
    border-radius: 60px; 
    border: 1px solid black; 
    background-color: gray; 
} 

https://jsfiddle.net/m74262yb/3/