jquery - 2 番目のアニメーション CSS の後に div を非表示にする

Question

コードに少し問題があります。「div.textoe」(ページ上の入力テキスト) の最初のアニメーションであり、2 番目のアニメーションは「div.textoee」にあります。私がやりたいことは、2 番目のアニメーションの後にページのテキストをクリアすることですが、私のコードでは起こりません。何が間違っていますか?

$(".textoe").on('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(){ 
    $('.textoe').addClass('textoee'); 
    $('.textoee').removeClass('textoe'); 
}); 
$(".textoee").on('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(){ 
    alert('Hide text');
});

http://jsfiddle.net/w55dN/1/