javascript - 关于jq的one方法,以及animationed事件的问题
本文介绍了javascript - 关于jq的one方法,以及animationed事件的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
flip:function(){
var self = this;
self.element.addClass('flip');
self.element.one('animationend.a',function(){
alert(1);//这个时候动画已经执行完毕
$(this).removeClass('flip');
self.shuffle();
})
},
shuffle:function(){
var self = this;
alert(1.1);//依旧会弹出
self.element.addClass('shuffle');
self.element.one('animationend.b',function(){
alert(2);//动画刚要执行
$(this).removeClass('shuffle');
self.deal();
})
},
deal:function(){
var self = this;
alert(2.2);//依旧会弹出
self.element.addClass('deal');
self.element.one('animationend.c',function(){
alert(3);//动画刚要执行
$(this).removeClass('deal');
})
}
写的一个连续的动画事件,添加一次事件监听。这个动画执行完毕,通过添加类,执行下一个动画。现在的问题是,只有第一个flip的事件监听是在动画执行完毕之后触发的,后续的事件监听,在动画执行开始的时候就被触发了。不得其解,求大佬拯救。
解决方案
原因在于,忽略了animationend说到底也是一个事件。动画执行的元素实际是self.element的子元素,因为子元素有两个,所以使用one方法会少得到一次消息。刚好下面再次添加了这个事件,导致的流程紊乱
这篇关于javascript - 关于jq的one方法,以及animationed事件的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文