jquery animate (height) 导致背景图像在 Firefox 中闪烁答案

【问题标题】：jquery animate (height) causes background-image flickering in firefoxjquery animate (height) 导致背景图像在 Firefox 中闪烁
【发布时间】：2010-02-02 11:12:53
【问题描述】：

我在使用 jQuery.animate 和 firefox 时遇到了一点问题：当我使用一些背景图像为容器的高度设置动画时，背景仅在 firefox 上开始闪烁 - 所有其他浏览器（甚至 ie）都显示流畅的动画。一个简化的代码 sn-p 显示我在做什么：

<div style="background-image:url(image.jpg);background-position:50% 50%;height:200px;"
      onmouseover="jQuery(this).animate({height:400});"></div>

非常感谢您的帮助。

【问题讨论】：

它目前在我们的本地开发服务器上，但我将在今天晚些时候上传一个演示

标签： jquery firefox jquery-animate

【解决方案1】：

出于兴趣，如果您将其包装在另一个 DIV 中并为其设置动画会发生什么，例如

<div style="background-position:50% 50%;height:200px;" onmouseover="jQuery(this).animate({height:400});">
     <div style="background-image:url(image.jpg);"></div>
</div>

（作为记录，我使用了您的代码，但更喜欢使用 CSS 类和 Late jQuery 事件绑定 ;-)

【讨论】：

我当然使用后期绑定/css 类，但我想保持示例简短 ;)
哦，感谢您的提示 - 将 height:100% 添加到内部 div 效果很好