关于jQuery animate 回调函数()的的函数为什么会在动画完成之前执行呢？

来源：蜘蛛抓取(WebSpider) 时间：2017-05-30 03:32 标签： animate的回调函数
正文 jquery animate动画效果的例子
jquery animate动画效果的例子
发布时间： & 编辑：
分享一例使用jquery中animate函数实现动画显示效果的例子，学习下jquery animate函数的用法，有需要的朋友参考下。
&&title&animate动画效果_脚本学堂_&/title&
&&& &script src=&jquery-1.9.1.js& type=&text/javascript&&&/script&
&&& &style type=&text/css&&
&&&&&&& .imgclass
&&&&&&&&&&& width: 100
&&&&&&&&&&& height: 100
&&&&&&&&&&& border: solid 1
&&&&&&&&&&& position:
&&&&&&&&&&& left: 20
&&&&&&&&&&& top: 20
&&& &/style&
&&& &script type=&text/javascript&&
&&&&&&& $(function () {
&&&&&&&&&&& $('img').click(function () {
&&&&&&&&&&&&&&& $(this).animate({ left: '+=130px' }, 2000).animate({ left: '+=130px' }, 2000).animate({ top: '+=130px' }, 2000).animate({ left: '-=130px' }, 2000).animate({ left: '-=130px' }, 2000).animate({ top: '+=130px' }, 2000).animate({ left: '+=130px' }, 2000).animate({ left: '+=130px' }, 2000, function () {
&&&&&&&&&&&&&&&&&&& $('img').hide(5000);
&&&&&&&&&&&&&&& })
&&&&&&&&&&& })
&&&&&&& });
&&& &/script&
&&& 以下内容，用于显示jquery中animate函数的动画效果。
&&&&&&& &img alt=&& src=&images/1.jpg& class=&imgclass& /&
&&&&&&& &table border=&1& width=&400px& height=&400&&
&&&&&&&&&&& &tr id=&table1&&
&&&&&&&&&&&&&&& &td align=&center&&
&&&&&&&&&&&&&&&&&&& 1
&&&&&&&&&&&&&&& &/td&
&&&&&&&&&&&&&&& &td align=&center&&
&&&&&&&&&&&&&&&&&&& 2
&&&&&&&&&&&&&&& &/td&
&&&&&&&&&&&&&&& &td align=&center&&
&&&&&&&&&&&&&&&&&&& 3
&&&&&&&&&&&&&&& &/td&
&&&&&&&&&&& &/tr&
&&&&&&&&&&& &tr id=&table2&&
&&&&&&&&&&&&&&& &td align=&center&&
&&&&&&&&&&&&&&&&&&& 6
&&&&&&&&&&&&&&& &/td&
&&&&&&&&&&&&&&& &td align=&center&&
&&&&&&&&&&&&&&&&&&& 5
&&&&&&&&&&&&&&& &/td&
&&&&&&&&&&&&&&& &td align=&center&&
&&&&&&&&&&&&&&&&&&& 4
&&&&&&&&&&&&&&& &/td&
&&&&&&&&&&& &/tr&
&&&&&&&&&&& &tr id=&table3&&
&&&&&&&&&&&&&&& &td align=&center&&
&&&&&&&&&&&&&&&&&&& 7
&&&&&&&&&&&&&&& &/td&
&&&&&&&&&&&&&&& &td align=&center&&
&&&&&&&&&&&&&&&&&&& 8
&&&&&&&&&&&&&&& &/td&
&&&&&&&&&&&&&&& &td align=&center&&
&&&&&&&&&&&&&&&&&&& 9
&&&&&&&&&&&&&&& &/td&
&&&&&&&&&&& &/tr&
&&&&&&& &/table&
&&& &/div&
&/body&您可能感兴趣的文章：会在animate开始时执行，尚不知原因。
$("#chat_frame").animate({height:"32px",width:"102px"}, "fast",minimizeFinish(self));function minimizeFinish(self){self._chat_frame_min = 1;window.alert("minimized");}
改成酱紫就对了，摊手。
$("#chat_frame").animate({height:"32px",width:"102px"}, "fast",function(){
self._chat_frame_min = 1;
阅读(...) 评论()温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(110)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'jquery.animate自定义动画的函数',
blogAbstract:'$(\"#freightTips\").animate({opacity:\"1\", left:xx, height:\"100\", width:\"100\"}, \"fast\").animate({top:yy + 10}, \"fast\").slideUp(\"fast\").slideDown(\"fast\");
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}（1）在同一组元素上的效果
当在一个.animate()方法中以多个属性的方式应用时，是同时发生的。
当以方法连缀的形式应用时，是按顺序发生的（排队效果）---除非queue选项值为false。
（2）多组元素上的效果
默认情况下是同时发生的
当在另一个效果方法或者在.queue()方法的回调函数中应用时，是按顺序发生的（排队效果）。
关于animate方法，此方法用于创建自定义动画，并且能够规定动画执行时长、擦除效果。动画完成后还可以地触发一个回调函数。
animate方法有两种形式，第一种接受4个参数：
一个包含样式属性和值的对象
可选的时长参数
可选的缓动（easing）类型
可选的回调函数
形式如下所示：
.animate({property1: 'value1',property2: 'value2'}，duration，easing，function(){});
第二种形式接受两个参数，一个属性对象和一个选项对象：
.animate({properties},{options});
实际上这里的第二个参数是将第一种形式的2-4参数封装在了另一个参数中，同时添加了两个选项。
.animate({
property1: 'value1',
property2: 'value2'
duration: 'value'
easing: 'value'
complete: function(){},
queue: true,
step: callbakc
阅读(...) 评论()

我要回帖

更多关于 animate的回调函数 的文章

 

随机推荐