在 Chrome 上制作动画之前的 jQuery 动画跳跃答案

【问题标题】：jQuery animation jumping before animating on Chrome在 Chrome 上制作动画之前的 jQuery 动画跳跃
【发布时间】：2012-09-19 12:31:15
【问题描述】：

我正在通过使用overflow:hidden 创建一个容器 div 来创建一个滑动轮播，并在其中创建一个图像 div，我试图通过为left 位置设置动画来移动它。像这样：

HTML

<div id="placeholder">
    <div id=carousel>

         <img src="wideimagestitched.png">

    </div>
</div>

CSS：

#placeholder {
    position: relative;
    width: 500px
    overflow: hidden;
}

 #carousel {
  position: absolute;
  top: 0px;
  left: 0px;
        }

jQuery：

$("#rightbutton").click(function(event){

event.preventDefault();
$("#carousel").animate({"left": "-500px"}, 1000)

});

这在 Firefox 中运行良好且流畅，但在 chrome 中，carousel div 在动画之前会向左跳约 200px，因为它应该向右跳。我已经把它放慢了，并且可以看到正在应用的内联样式，是的 - 它在动画之前向后跳了 200px 左右。

任何帮助表示赞赏！

【问题讨论】：

这些代码在 chorme 22 中运行良好，检查您的 chorme 版本，但我认为您的问题出在其他代码而不是 chrome！
谢谢...我也在使用 Chrome 22，但 defo 跳跃。在代码中看不到任何可以做到这一点的东西。奇数。

标签： jquery css google-chrome animation position

【解决方案1】：

您可以尝试通过此插件使用硬件加速： http://playground.benbarnett.net/jquery-animate-enhanced/

真的很流畅

【讨论】：

【解决方案2】：

我想问题出在 fouc 上，你的 jquery 将在 document.ready 状态之后工作，所以浏览器从 dom 读取的任何内容都将在没有 jquery 的情况下显示。把你关心的代码放在可见性中：隐藏到 dom已正确阅读然后在 document.ready unhide，您可以看到以下示例，我遇到了类似的问题

fouc example

【讨论】：

【解决方案3】：

您的代码运行良好，请参阅DEMO

【讨论】：

是的，这很好用......但我的代码不是。也许这可能与我在中间开始图像的事实有关，以允许左/右键单击。即左设置为“-916px”，动画将其带到（右键）“-1860px”和（左键）“0px”