Question

我是jQuery（和web dev本身）的新手，当我将鼠标放在它上面时尝试让图像扩展，并在我移除鼠标悬停时返回原始大小。但是我不知道为什么我的元素会越来越小，如果我多次上下移动它。我该如何防止这种情况发生？

提前谢谢！

** #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事件并且属性会多次减少，请参阅console 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/

为什么我的元素在鼠标效果后会不断变小？

1 个答案: