Question

我正在创建一个滑动旋转木马，通过使用overflow:hidden创建一个容器div，并在其中创建一个我想通过动画left位置移动的图像div。像这样：

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左右。

任何帮助表示赞赏！

Answer 1

您的代码运行正常，请参阅此DEMO

Answer 2

我猜问题是关于fouc，你的jquery会在document.ready状态之后工作，所以浏览器从dom中读取的任何内容都会在没有jquery的情况下显示出来。将你关注的代码放在visiblity中：隐藏到dom已经正确阅读然后在document.ready取消隐藏，您可以看到以下示例，我面临类似的问题

fouc example

Answer 3

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

工作非常顺利

jQuery动画在Chrome上制作动画之前跳转

3 个答案: