Question

我有一个添加css动画类的jquery代码。代码在chrome，firefox和其他现代浏览器中正常工作。这就是我用来运行动画的方法：

$(document).ready(function(){
    doanim('body','flipInY');
});

我在doanim函数中的含义是：

function doanim(ido,x,ext) {
if (ext===undefined){
    ext="";
}
eval("$('"+ido+"').addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){$(this).removeClass(x + '   animated');"+ext+"});");
};

正如我所说，它可以正常运行动画但是当我在这里看到编写代码时，问题就开始了

$('#btnstart').click(function(){
$('body:not(#sp3,#sp4,#sp5)').addClass('rotateOut' + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
    $(this).removeClass('rotateOut animated');$("#sp1,#sp2,#inpcontainer,#btnstart,#titledash,#back,#logo-right").hide();$("#sp3,#sp4,#sp5").addClass('bounceInLeft' + ' animated');$("#sp3").show();
    $("#sp3").css({"opacity": 0,"-moz-opacity":0}).one('mozAnimationEnd webkitAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        ///it's gonna not showing #sp4 as it's supposed to here in firefox tested with alert its entering this part
        $("#sp4").show();
        $("#sp4").css("opacity", 0).one('mozAnimationEnd webkitAnimationEnd MSAnimationEnd oanimationend animationend', function(){
            $("#sp5").show();
            $("#sp5").css("opacity", 0).one('mozAnimationEnd webkitAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                alert("d");
            });
        });
    });
})
});

这段代码应该旋出指定的对象，用动画显示＃sp3，在animaton结束时将不透明度设置为0，用＃sp4，＃sp5做同样的事情它在Google Chrome中工作得非常好。但是在Firefox（v30）中它一直都很好，直到＃sp3的不透明度降低。所以当#sp3消失时它会停止并且不会显示#sp4，因为它应该这样做。我很乐意帮助我解决这个问题谢谢大家

在Firefox中过渡

0 个答案: