Question

到目前为止，我有一个相当不错的代码来动画中心框。出于某种原因，当我在不同的浏览器和计算机（Mac和PC）上预览时，我会得到不同的结果。一个可以显示更快的动画速度，而另一个是完美的。我也注意到当盒子从左到右动画时，有一个口吃，动画突然出现。我不能真正解释它。我的代码如下：

$(document).ready(function(){

        isAnimating = false;

$('.wrapper').on('click', '.arrow-left', function() {
    if(isAnimating) return;

    isAnimating = true;
    var $current = $(this).parents('.signupBox');
    var $next = $(this).parents('.signupBox').next();

    $current.stop(true,true).animate({
        left: "200%"
    }, 500, 'linear', function() {
        $current.css({
                left: "-200%"
            }).appendTo('.wrapper'); // move to end of stack

        $next.css({
                left: "-200%"
            }).stop(true,true).animate({
                left: "0%"
            }, 500, 'linear', function() {
                isAnimating = false;
            });
    });

}).on('click', '.arrow-right', function() {
    if(isAnimating) return;

    isAnimating = true;
    var $current = $(this).parents('.signupBox');
    var $next = $(this).parents('.signupBox').siblings().last();

    $current.stop(true,true).animate({
        left: "-200%"
    }, 500, 'linear', function() {
        $current.css({
                left: "200%"
            });

        $next.prependTo('.wrapper') // move to front of stack
            .css({
                left: "200%"
            }).stop(true,true).animate({
                left: "0%"
            }, 500, 'linear', function() {
                isAnimating = false;
            });
    });
});

});

一些CSS：

.signupBox:first-child {
    display: block;
}
.signupBox {
    display: none;
}

.wrapper
{
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: absolute;
}

Here's a JSFiddle显示会发生什么，希望你能从那里看到问题所在。

然后从右到左动画（单击<符号，您将看到速度的轻微变化。

Answer 1

使用JS和css转换时，不同的浏览器可能会有不同的结果，它实际上取决于您的机器速度，浏览器速度。它可能取决于每个浏览器中打开的标签数量，浏览器插件也可以冻结动画。其他JS活动也是如此。

我已经在Chrome，FF中测试过您的代码（无法在IE11中检查它，似乎jsfiddler上使用jQuery存在JS错误）。没有提到一些奇怪的东西。

我可以推荐使用Greenshock JS动画库。 http://www.greensock.com/get-started-js/ 他们说这是jQuery动画的x20倍。但我认为实际上可能在2,3）

该libruary基于Flash库，Action Script编码器使用Flash库在Flash中创建美颜动画。

jQuery动画问题？

1 个答案: