jQuery 如何在鼠标悬停时对div的宽度和高度进行动画处理

我们可以使用jQuery在鼠标悬停时对div的宽度和高度进行动画处理，方法是对悬停的div应用animate()方法。我们可以指定所需的宽度和高度值，以及动画的持续时间。此外，我们还可以添加一个回调函数，在动画完成后执行额外的动作。

jQuery是一个JavaScript库，它可以很容易地在网页上添加互动元素。

方法

有几个不同的方法，你可以使用jQuery来实现鼠标悬停时的div宽度和高度的动画。

一种方法是使用jQuery .hover() 方法，它允许你指定两个函数，当鼠标进入和离开一个元素时执行。在 鼠标进入 时执行的函数中，你可以使用jQuery .animate() 方法来动画化div的宽度和高度。像这样

$("#someDiv").hover(function() { $(this).animate({ width: "100px", height: "100px" }, "slow"); }, function() { $(this).animate({ width: "50px", height: "50px" }, "slow"); });

例子

<!DOCTYPE html>
<html>
<head>
   <title>Animate DIV</title>
</head>
   <body>
      <div id='animate' style="color:black; background:red">hello  world</div>
      <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
      <script>    
         jQuery("#animate").hover(
            function(){
               jQuery(this).animate({width: "300px", height: "300px"});
            },
            function(){
               jQuery(this).animate({width: "100px", height: "100px"});
            }
         );   
      </script>
   </body>
</html>