JQuery自定义动画animate方法

本文详细介绍了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所有的动画效果方法。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值