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

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/