如何使用 jQuery 在鼠标悬停时为 div 宽度和高度设置动画？

如果您想要在鼠标悬停时为 div 元素设置动画效果，您可以使用 jQuery 的 hover() 方法来实现。在这个示例中，我们将使用该方法来在鼠标悬停时逐渐增加 div 的宽度和高度，以及在鼠标离开时逐渐恢复其原始大小。

HTML

我们将创建一个简单的 HTML 结构，其中包含一个带有 ID 的 div 元素：

<div id="myDiv"></div>

CSS

我们将使用一些基本的 CSS 样式来设置 div 元素的初始大小和背景色：

#myDiv {
  width: 200px;
  height: 200px;
  background-color: blue;
}

jQuery

现在，我们将使用 jQuery 来设置 div 元素的动画效果。具体来说，我们将在鼠标悬停时使用 animate() 方法来逐渐增加 div 的宽度和高度，并在鼠标离开时使用同样的方法来逐渐恢复其原始大小。

$(document).ready(function() {
  $('#myDiv').hover(
    function() {
      $(this).stop().animate({width: '400px', height: '400px'}, 500);
    },
    function() {
      $(this).stop().animate({width: '200px', height: '200px'}, 500);
    }
  );
});

在这个代码片段中，我们首先使用 ready() 方法来确保页面加载后再运行代码。然后，我们使用 hover() 方法来为 div 元素添加鼠标悬停事件处理程序。该方法接受两个参数 - 第一个参数是在鼠标悬停时运行的函数，第二个参数是在鼠标离开时运行的函数。

在每个函数中，我们使用 stop() 方法来停止正在运行的动画（如果有的话），然后使用 animate() 方法来将 div 元素的宽度和高度逐渐增加或降低。在本例中，我们使用 500 毫秒的持续时间来定义动画效果的速度。您可以根据需要调整持续时间。

结论

现在，当您将鼠标悬停在 div 元素上时，您会看到它逐渐变大，当您将鼠标移开时，它会逐渐还原为原始大小。通过使用 jQuery 的 hover() 方法和 animate() 方法，您可以轻松地为任何元素添加动画效果。