标签：tca any abr cga class -- 添加 tom aaaaa
animate()方法是jquery中自定义动画的方法，是js动画。在animate()方法里，可以有一个回调函数，这个回调函数在动画执行完之后执行。
而stop()方法是停止当前元素的当前动画队列里面的动画，举个栗子：
//给向右移动添加事件
$(".mid-img>.to-right").on("click", function () {
//变化偏移量和图片index
if(self.img_index==self.img_num){
//此处是当图片为最后一张的时候的时候，改变是不一样的
//self.left_index=self.left_index-1004;
//var index_temp=0+2;
//
//$(".go_span:first").stop().animate({left: self.left_index+"px"},300,function(){
//
// //这个做法可取么？？？如果使用到stop来停止函数的话，这个是不可取的，因为只要点击了，就一定要有位移
// //这个是位移后立马变回的。s
// //这个是位移后立马变回的。
// self.left_index=(0-index_temp)*1004;
// self.img_index=0;
// $(".go_span:first").css({left:self.left_index+"px"});
// $(".index-header>li:eq("+self.img_index+")").addClass("li-red-bg");
// $(".index-header>li:eq("+self.img_index+")").siblings().removeClass("li-red-bg");
//
//
//});
//
//
////修改标题的文字------------------
//var title=$(".go_span>a:eq("+index_temp+")").prop("title");
//$(".mid-img>.bottom-text").text(title);
$(".go_span:first").stop();
}else {
self.img_index=self.img_index+1;
self.left_index=self.left_index-1004;
self.go();
}
});
在这里，如果是最后一张我，再点击的时候，就stop();可以看到效果如下：
可以看到，轮播图停在30张过渡到31张这里，因为img_index先变为31,在过渡切换图片的，所以在切换过程中，我点击触发了stop();所以animate()的过程就卡在那里了。那为什么animate()前面添加stop()不会看到卡壳停顿呢，因为stop()后，它又立刻执行animate(),有有动画执行，所以看起来是没有卡壳的。
如果在animate()之前不加stop的话，狂点轮播图的下一张图片，就会发现，下一张图片，等你的鼠标停止点了，轮播图还在一张一张地切换图片，这就是因为，当前元素的上一个动画还没完成，又触发了一个动画的话，这个动画就会放在队列（还是动画栈）里面，反正不会立即执行。
但是如果在animate之前加上stop()的话，在执行animate之前stop()会停止当前元素正在执行的动画，并且立马执行animate()里面的动画。但是这个正在执行的动画是算执行了，，还是算没有执行呢？他的回调函数，会不会触发呢？
这个真在执行的动画是算执行了，只要有开始执行的动画，就算被执行了，也会触发回调函数，只是回调函数不是立即执行，而是在接手的动画结束之后执行的；就相当于被停止的动画，和下一个动画，融合成了一个动画，所以回调函数在下一个动画结束后执行：举个栗子，animate() A . 点击触发stop()。animate() B; 这个时候A停止了么，变成了动画AB,A的回调函数在动画AB执行后触发，那如果animate()B本身又自带一个回调函数呢，那是那个回调函数先触发，那来做一个测试，代码 如下：
go:function(){
var self=this;
console.log(this.img_index);
//获取要滚动的span,并滚动
var remenber_img_index=self.img_index;
$(".go_span:first").stop().animate({left: self.left_index+"px"},300,function(){
console.log(remenber_img_index);
});
var index_temp=this.img_index+2;
//修改标题的文字------------------此处加儿
var title=$(".go_span>a:eq("+index_temp+")").prop("title");
$(".mid-img>.bottom-text").text(title);
$(".index-header>li:eq("+this.img_index+")").addClass("li-red-bg");
$(".index-header>li:eq("+this.img_index+")").siblings().removeClass("li-red-bg");
},
在1-31之间的animate();中添加一个对调函数用来打印当前的索引img_index,用一个临时变量remenber_img_index来存储。打印的结果如下：
可以看出，是A的回调函数先执行，B的回调函数后执行。其实即使把他们的回调函数都放在同一队列（或栈）里面。跟其他的回调函数一样，先触发的先执行。嗯，就是这样的
标签：tca any abr cga class -- 添加 tom aaaaa
原文地址：http://www.cnblogs.com/thonus/p/6066687.html
