博客

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

  • Post category:jquery

使用jQuery为网页添加动态效果是非常常用的操作之一。下面是关于如何使用jQuery在鼠标悬停时对div的宽度和高度进行动画处理的详细攻略。

步骤一：创建HTML结构

首先，在HTML页面中创建一个div元素，用于测试jQuery动画效果：

<div class="box">这是一个测试盒子</div>

步骤二：链接jQuery库文件

在页面head部分，必须先链接jQuery库文件：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

步骤三：为div添加样式

为div添加样式，让其有明显的宽高变化效果：

.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

步骤四：编写jQuery代码

使用jQuery完成鼠标悬停时对div的宽度和高度进行动画处理的代码如下：

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

代码解析：

  • 通过 $(document).ready() 来保证文档加载完成后执行代码；
  • 使用 $('.box') 选中所有class为box的元素；
  • 调用 .hover() 方法实现当鼠标悬停在box元素上时，执行一个函数，离开时执行另一个函数；
  • 使用 .animate() 方法进行动画处理，将宽度和高度的值分别设置为400px和500px，动画时间为500毫秒。

步骤五：测试效果

保存代码并刷新浏览器页面，在box元素上悬停鼠标，发现其宽度和高度随着鼠标悬停而在0.5秒内变成400px，移开鼠标后宽度和高度又变为200px，实现了动画效果。

示例一：使用回调函数

在修改div的宽高之后，还可以使用回调函数实现额外的动画效果。比如，在宽度和高度变化之后，让盒子有一个向下移动的动画，示例代码如下：

$(document).ready(function() {
  $('.box').hover(function() {
    $(this).animate({
      width: '400px',
      height: '400px'
    }, 500, function() {
      $(this).animate({
        marginTop: '20px'
      }, 200);
    });
  }, function() {
    $(this).animate({
      width: '200px',
      height: '200px',
      marginTop: '0'
    }, 500);
  });
});

代码解析：

  • 在第一个 animate() 方法中，增加了一个回调函数，表示在宽度和高度动画执行完毕后，执行这个回调函数；
  • 在回调函数中，使用另一个 animate() 方法让盒子执行下移动画，动画时间为200ms，移动距离为20px；
  • 在第二个 animate() 方法中，将盒子的 marginTop 属性修改为0，从而恢复到原始位置。

示例二：使用easing参数

除了回调函数外，还可以自定义缓动函数，实现更多样的动画效果。例子代码如下:

$(document).ready(function() {
  $('.box').hover(function() {
    $(this).animate({
      width: '400px',
      height: '400px'
    }, {
      duration: 1000,
      easing: 'easeOutBounce'
    });
  }, function() {
    $(this).animate({
      width: '200px',
      height: '200px'
    }, {
      duration: 1000,
      easing: 'easeInOutCirc'
    });
  });
});

代码解析：

  • 在 animate() 方法的第二个参数中，增加了 duration 和 easing 属性值，分别表示动画持续时间和缓动函数；
  • 当鼠标移上时，使用 easeOutBounce 缓动函数，可以让盒子在宽高变化完毕后有一个弹跳效果；
  • 当鼠标移开时，使用 easeInOutCirc 缓动函数，可以让盒子宽高变化更加柔和一些。

总之，通过jQuery中提供的动画处理方法和参数，我们可以轻松实现各种盒子动态效果，满足用户炫酷的操作需求。

Tags: