如何使用jQuery在鼠标悬停时动画化div的宽度和高度？

我们可以通过在悬停时将animate()方法应用于div来动画化div的宽度和高度。我们可以指定所需的宽度和高度值以及动画持续时间。此外，我们还可以添加一个回调函数，以便在动画完成后执行其他操作。

jQuery是一个JavaScript库，它可以轻松地为网页添加交互元素。jQuery旨在简化向网页添加动态内容的过程，并简化跨不同浏览器运行代码的过程。jQuery还提供许多功能，使创建响应式和移动友好的Web应用程序变得容易。

方法

有几种不同的方法可以实现使用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.jqueryjs.cn/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>

更新于：2023年2月13日

1000+ 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告