1

我正在创建一个滑动轮播，方法是创建一个容器 div，其中包含overflow:hidden一个我试图通过动画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 中，carouseldiv 会向左跳约 200px，然后再向右跳动。我已经把它放慢了，并且可以看到正在应用的内联样式，是的 - 它在动画之前向后跳了 200px 左右。

任何帮助表示赞赏！

4

3 回答 3

0

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

工作真的很顺利

于 2012-09-27T19:48:33.763 回答
0

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

焦点示例

于 2012-09-27T19:34:08.583 回答
0

您的代码运行良好，请参阅此演示

于 2012-09-27T17:03:51.687 回答