关于jq的one方法，以及animationed事件的问题

Question

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的事件监听是在动画执行完毕之后触发的，后续的事件监听，在动画执行开始的时候就被触发了。不得其解，求大佬拯救。

Answer 1

原因在于，忽略了animationend说到底也是一个事件。动画执行的元素实际是self.element的子元素，因为子元素有两个，所以使用one方法会少得到一次消息。刚好下面再次添加了这个事件，导致的流程紊乱