掌握jQuery动画:轻松实现网页动态效果

发表时间: 2021-09-15 22:49

我们可以通过 jQuery 中的 animate() 方法来创建定义动画。

animate()方法

animate() 方法用于创建自定义动画。

语法如下:

$(selector).animate({params}, speed, easing, callback); 
  • params :必需参数,定义要设置动画的 CSS 属性。
  • speed:可选参数,指定效果的持续时间,可选值有 slowfast、毫秒。
  • easing:可选参数,规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数有 swinglinear
  • callback:可选参数,是动画完成后要执行的函数

默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。如果要对位置进行操作,需要先将元素的 position 属性设置为 relativefixedabsolute

示例:

我们来看一下例子:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><style>  .box{    width: 700px;    height: 200px;    border: 1px solid #000;  }  .rect{    width: 100px;    height: 100px;    background: pink;    margin-top: 50px;    position:absolute;  }</style><script>  $(function(){    $("button").click(function(){      $(".rect").animate({left:'300px'});    });  });</script></head><body>  <div class="box">    <div class="rect"></div>  </div>  <p><button>开始动画</button></p></body></html>

在这个例子中,有一个大的矩形框,我们要实现的效果为点击按钮,让粉色正方形向右移动。需要注意的是,我们必须给要移动的元素设置 position 属性,否则 animate() 方法不起作用。而花括号 {} 中的就是 CSS 属性,animate() 方法中几乎可以操作所有 CSS 属性。但是在使用时必须注意,要使用 Camel 标记法书写所有的属性名,例如 padding-left 使用 paddingLeftpadding-right 使用 paddingRight 等。
我们来看一下上述代码在浏览器中的演示效果:

操作多个属性

我们可以为一个动画设置多个属性,各个属性之间通过逗号隔开。例如设置动画移动后的距离,透明度,宽度和高度。

示例:

$(function(){    $("button").click(function(){      $(".rect").animate({        left: '400px',        opacity: '0.8',        height: '20px',        width: '20px'      }, 2000);    });});

在浏览器中的演示效果:



使用相对值

我们在给动画设置 CSS 属性的时候可以使用相对值,相对值就是相当于元素当前值,在值的前面加上 +=-= 符号。

示例:

$(function(){    $("button").click(function(){      $(".rect").animate({        left: '400px',        opacity: '0.8',        height: '-=50px',        width: '+=100px'      }, 2000);    });});

在浏览器中的演示效果:

使用预先定义的值

我们可以将属性的动画值指定为 showhidetoggle

示例:

show 表示显示,hide 表示隐藏,toggle 表示切换显示与隐藏:

$(function(){    $("button").click(function(){      $(".rect").animate({        left:'300px',        height: 'toggle',        width: 'toggle',      }, 2000);    });});

在浏览器中的演示效果:

使用队列功能

默认情况下,jQuery 提供针对动画的队列功能。这也就意味着如果在彼此之后编写多个 animate() 方法调用,jQuery 将使用这些方法调用创建一个“内部”队列,然后它逐一运行 animate 调用。

示例:

$(function(){    $("button").click(function(){      var rect = $(".rect");      rect.animate({left:'300px', width:'300px', opacity:'0.8'}, 2000);      rect.animate({height:'10px', opacity:'0.5'}, "slow");      rect.animate({width:'100px', height:'100px', opacity:'1'}, 2000);    });});

在浏览器中的演示效果:

stop()方法

stop() 方法用于在动画或效果完成前对它们进行停止。它适用于所有的 jQuery 效果函数,包括滑动,淡入淡出和自定义动画。

语法如下:

$(selector).stop(stopAll,goToEnd); 
  • stopAll:可选参数,指定是否应该清除动画队列,默认值为 false ,即只会停止活动的动画,后续队列动画仍继续执行。
  • gotoend:可选参数,指定是否立即完成当前动画,默认值为 false

示例:

点击按钮开始动画,点击粉色正方形停止动画:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><style>  .box{    width: 700px;    height: 200px;    border: 1px solid #000;  }  .rect{    width: 100px;    height: 100px;    background: pink;    margin-top: 50px;    position:absolute;  }</style><script>  $(function(){    $("button").click(function(){      $(".rect").animate({        left:'300px',        width: '300px',      }, 3000);    });    $(".rect").click(function(){      $(this).stop();    });  });</script></head><body>  <div class="box">    <div class="rect"></div>  </div>  <p><button>点击按钮开始动画</button></p></body></html>

在浏览器中的演示效果: