如何使用 jQuery 为鼠标悬停时的 div 宽度和高度设置动画?
jqueryweb developmentfront end technology
我们可以使用 jQuery 为鼠标悬停时的 div 宽度和高度设置动画，只需在悬停时对 div 应用 animate() 方法即可。我们可以指定所需的宽度和高度值以及动画的持续时间。此外，我们还可以添加回调函数，以便在动画完成后执行其他操作。
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.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>
