jQuery的动画（高度）导致背景图像在Firefox中闪烁 [英] jquery animate (height) causes background-image flickering in firefox

问题描述

我有一个小问题使用jQuery.animate与Firefox的问题：当我用一些背景图像设置容器的高度时，背景开始闪烁在Firefox上 - 所有其他浏览器（即使ie）显示一个平滑的动画。一个缩小的代码片段，显示了我的工作：

 < div style =background-image：url（image.jpg） ; background-position：50％50％; height：200px; 
 onmouseover =jQuery（this）.animate（{height：400}）;>< / div> 
  

我将不胜感激您的帮助。

解决方案

出于兴趣，如果将其包装到另一个DIV中并进行动画处理会发生什么，例如

 < div style =background-position：50％50％; height：200px;的onmouseover = jQuery的（本）.animate（{高度：400}）; > 
< div style =background-image：url（image.jpg）;>< / div> 
< / div> 
  

（为了记录，我已经使用了您的代码，但是希望使用CSS类和Late jQuery事件绑定; - ）

I have a little Problem using jQuery.animate with firefox: when i animate the height of a container with some background image, the background starts to flicker on firefox only - all other browsers (even ie) show a smooth animation. a reduced code snippet that shows what i do:

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

I would greatly appreciate your help.

解决方案

Out of interest, what happens if you wrap that in another DIV and animate that, e.g.

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

(For the record, I've used your code, but would have preferred using CSS Classes and Late jQuery event binding ;-)

这篇关于jQuery的动画（高度）导致背景图像在Firefox中闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！