Avoiding flickering in jQuery when animating elements which contain Flash

So, we had this issue when were were using slideToggle (and it would apply to slideDown) where the Flash movie contained inside the element we were animating would flicker once the animation is complete.

What’s happening: While animating, jQuery needs to add a few style definitions if they are not already declared. Among these is the ‘overflow’ property. jQuery sets this to ‘hidden’ in order to show the animation and then removes this declaration upon completion of the animation. When the declaration is removed, Flash gets the signal to re-render the movie (because, possibly, the layout of the page has changed).

How to fix it: declare ‘overflow:hidden’ in the CSS for the element. Voilá, the flickering is gone.

Tags: , , ,

This entry was posted on Monday, January 18th, 2010 at 3:28 pm by josephsong, filed under CSS, Development, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.

One Response to “Avoiding flickering in jQuery when animating elements which contain Flash”

  1. Alex says:

    Hey man!! Thanx for this.
    Helped me out very much with my project, sometime you just miss the little things. Thanx.

Leave a Reply