jquery animate自定义动画的使用感受

本文介绍了使用jQuery的animate方法自定义动画的技巧,包括灵活性应用、移动方向的理解、多属性动画效果及队列功能的运用。

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

在使用了jquery提供的animate这个方法来自定义动画之后,有这么几点感受。


第一点,animate使用起来还是比较灵活的。animate({css样式},slow or fast,callback);方法用起来比较简单。也就是用过第一个花括号里面对选中的操作元素的样式的改变来达到动画的效果。例如:animate({width:'300px'});能将原来的元素的宽度变成300px;animate({width:'+=300px'})是在原有的宽度的基础上加上300p的宽度。


第二点,比较拗口的地方。比如要把元素向右移动300px;代码是animate({left:'300px'});按照常规的想法应该是right:300px呀。但这里的left指的是离左边300px,相当于把元素向右移动了300px;


第三点,为了让运动看起来更加的复杂,可以同时修改多个css属性;比如:

             animate({

                         width:'300pc',

                         opacity:'0.5',

                         left:'100px',

                        ........

                          });

            中间用,隔开,而不能像css样式一样用;号。其中还要注意一点就是样式属性的书写格式。比如一般的margin-left,在animate里面就应该写成marginLeft。

第四点,animate可以使用队列功能。也就是先做什么变换,然后再做什么变换。比如

              var demo = $("#id");

             demo.animate({width:'300px'});

             demo.animate({fontSize:'3em'});

知道以上的这四点,自定义一个动画就没什么问题了!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值