Jquery css转换不'；行不通

我已经建立了一个旋转旋转木马使用css。旋转木马由“ul”标签制成。在左/右导航时，我会在列表的左侧或右侧添加一个“li”（克隆相关值并追加/前置）。然后，我正在更正'ul'的左值，并使用动画的css转换移动'ul'。这用于通过动画实现无休止的导航效果。
该动画对于“下一个”导航非常有效，但对于“后面”导航则无效。 最让我困惑的是，当调试“back”代码时，动画确实可以工作！（可能是时间问题，但是，为什么“下一步”有效？）

此问题的演示如下：

请注意：这不是我真正的代码。真正的代码被包装在一个面向对象风格的插件中，对用户快速向前和向后单击以及使用jQuery“animate”的多边形填充等情况进行验证。

---

我还考虑使用现成的插件，但要求没有达到我发现的…p> 这个问题让我有些困惑；当在中间添加警报（在<代码> Advase调用）时，它似乎工作了一点。这可能与浏览器DOM更新的时间有关，至少对我来说，这是一个巨大的兼容性危险信号

既然您仍然依赖jQuery，我建议您使用jQuery动画。代码更小，功能受支持，并且可以在CSS3之前的浏览器中使用。我已经做了一个模型，它完全符合你自己的期望，只是用它来代替

注意，我使用了

swing

jQuery；如果您想要更多的放松类型（如CSS中的

放松输入输出

），请尝试

使用的代码（在.prev按钮上）：

---

这个问题让我有些困惑；当在中间添加警报（在<代码> Advase调用）时，它似乎工作了一点。这可能与浏览器DOM更新的时间有关，至少对我来说，这是一个巨大的兼容性危险信号

既然您仍然依赖jQuery，我建议您使用jQuery动画。代码更小，功能受支持，并且可以在CSS3之前的浏览器中使用。我已经做了一个模型，它完全符合你自己的期望，只是用它来代替

注意，我使用了

swing

jQuery；如果您想要更多的放松类型（如CSS中的

放松输入输出

），请尝试

使用的代码（在.prev按钮上）：

---

谢谢我有确切的代码作为旧浏览器的多边形填充。问题在于jqueryanimate和css3转换之间存在巨大的性能差异。实际上，在这两种方法之间切换时，您可以看到差异。请参考@Yaniv，因为jQuery 1.8可以忽略不计（他们在1.8中重新设计了动画代码）。此外，该博客上的测试同时显示了1849个项目的动画效果。但是，如果您仍然非常关心这个问题，您可以使用jQuery.Thank来自动执行CSS3转换。我有确切的代码作为旧浏览器的多边形填充。问题在于jqueryanimate和css3转换之间存在巨大的性能差异。实际上，在这两种方法之间切换时，您可以看到差异。请参考@Yaniv，因为jQuery 1.8可以忽略不计（他们在1.8中重新设计了动画代码）。此外，该博客上的测试同时显示了1849个项目的动画效果。但是，如果您仍然非常关心这个问题，您可以使用jQuery来为您自动化CSS3转换。将settimeout添加到动画时，问题消失。有什么想法吗？看，我认为这与时间有关。将settimeout添加到动画时，问题消失。有什么想法吗？看见

$('.prev').on('click', function() {
    var $childelement = $('ul');
    $childelement.children('li').last().clone().prependTo($childelement);
    $childelement.css({
        'left': '-150px'
    }).animate({ 'left': '-50px' }, 400, "swing", function() {
        console.log('transition ended');
        $childelement.children('li').last().remove();
    });
});​