jQuery animate() 在 Google Chrome 和 Safari 中的左侧位置

Posted

技术标签:

【中文标题】jQuery animate() 在 Google Chrome 和 Safari 中的左侧位置【英文标题】:jQuery animate() left position in Google Chrome and Safari 【发布时间】:2011-11-12 19:13:18 【问题描述】:

我正在尝试创建一个简单的动画,其中元素被附加到容器后从左侧滑入,如下所示:

$('#container').append(
$('<div class="item" style="left:-300px;top:0"></div>').animate( left : 0 , 300)
);

容器隐藏了溢出,宽度为 300 像素。 附加的 'item' 元素也有 300px 宽度并且在附加时位于容器之外,然后应该滑入直到它到达 'left : 0'。

它可以在 Firefox 中使用,但 Google Chrome 和 Safari 只是将其显示在容器中,而不会将其滑入。

有什么想法吗?

【问题讨论】:

您是否想过使用display:none;slideToggle() 来代替?可能会让事情变得容易一些。 你会如何使用 slideToggle() ?您不能使用此方法指定位置。 你完全正确,我在这里混淆了 2 件事,我真正想到的是使用 animate(width:'show'),如下所示:bueltge.de/test/jquery_horizontal_slide.php - 很抱歉造成混淆。 【参考方案1】:

可能你需要在动画之前添加元素:

$('<div class="item" style="left:-300px;top:0"></div>').appendTo('#container').animate( left : 0 , 300)

【讨论】:

你说得对——我只是在追加后尝试这样做,它工作正常。

以上是关于jQuery animate() 在 Google Chrome 和 Safari 中的左侧位置的主要内容,如果未能解决你的问题,请参考以下文章

jquery animate 怎么延迟执行

jquery .animate() 没有动画

jquery的animate怎么获取动画的CSS属性呢?

jQuery - .animate() 在滚动时非常延迟

jQuery中动画animate(下)

mouseenter()+ animate()的jquery问题[重复]