JQuery自定义动画animate方法

最新推荐文章于 2022-08-13 17:33:59 发布

原创最新推荐文章于 2022-08-13 17:33:59 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #animate #jquery特效

Web前端专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了jQuery中的动画方法，包括基本的show()、hide()等，并深入讲解了animate()方法的用法，如自定义动画、累加动画、多重动画及动画回调函数的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery中show( ) 方法和hide( ) 方法会同时修改元素的多个样式属性，即高度、宽度和不透敏度；

fadeOut( ) 方法和fadeIn( ) 方法只会修改元素的不透明度；

slideDown( ) 方法和slideUp( ) 方法只会改变元素的高度。

很多情况下，这些方法无法满足用户的各种需求，那么就需要对动画有更多的控制，需要采取一些高级的自定义动画来解决这些问题。

语法结构为：

animate(params, speed, callback)

参数说明：

a、params：一个包含杨树属性及值的映射

b、speed：速度参数，可选

c、callback：在动画完成是执行的函数，可选

1、自定义简单动画

有一个空白的HTML文档，里面有一个id='panel'的<div>元素，当<div>元素被单击时，能在页面上横向飘动

先给这个<div>元素添加CSS样式

#div{
  position:relative;
  width:100px;
  height:100px;
  background-color:#CCCCCC;
}

为#panel元素创建一个单击事件，然后对元素加入animate()方法，是元素在3秒内，向右移动500像素

$('#panel').click(function(){
  $(this).animate({left:'500px'}, 3000);
});

2、累加、累减动画

在之前的代码中，如果在500px之前加上 += 或者 -=符号，即表示在当前位置累加或者累减。

$(this).animate({left:'+=500px'}, 3000);

3、多重动画

同时执行多个动画

例如元素在向右滑动的同时，放大元素的高度

$(this).animate({left:'500px', height:'200px'}, 3000);

按顺序执行多个动画

只需要把代码拆开，按顺序写就可以了

$(this).animate({left:'500px'}, 3000);
$(this).animate({height:'200px'}, 3000);
// 链式写法
$(this).animate({left:'500px'}, 3000)
       .animate({height:'200px'}, 3000);

4、动画回调函数

如果想要在顺序执行多个动画的最后，将元素式样CSS进行修改，此时不会成功。因为css( ) 方法并不会加入到动画行列中，而是立即执行。

此时可以使用回调函数(callback) 对非动画方法实现排队。

$(this).animate({left:'400px',opacity:'1'}, 3000)
       .animate({top:'200px'}, 3000, function(){
    	   $(this).css('border':'5px solid blue');
       });

* callback( )回调函数适用于JQery所有的动画效果方法。