为什么鼠标离开效果后我的元素会越来越小？

Question

我是 jQuery 的新手（以及 Web 开发本身），当我将鼠标悬停在图像上时，我试图让图像展开，并在我将鼠标悬停时返回到它的原始大小。但是，我不知道为什么如果我多次悬停它，我的元素会变得越来越小。我该如何防止这种情况发生？

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/