Really smooth animate effects with jQuery

Question

I have some jQuery set up on my page to swap out some DIVs when a user clicks a link. The DIVs have flash objects, paragraphs and images inside them and when I click the link to swap it out the effects aren't exactly... smooth.

This is my code:

$('#div').toggle('fast');
$('#anotherdiv').toggle('fast');

It kinda gets stuck on the flash object for a short while and then disappears completely. Does anyone know a plugin to make really smooth animated effects in jQuery? I took a look at jQuery UI but it seems a little overkill for what I want it for.

Cheers. :)

Answer 1

Javascript animation is really dependant on the browser. IE is terribly slow at javascript and a lot of the time it isn't even worth trying to animate with IE. Firefox and chrome are much better. Try it in chrome and see if it is still problematic.

Answer 2

@stimms is right about speed but there's always a workaround :)

I'd hide the flash container before starting the animation. That way it won't be in the way of things.

Answer 3

Make sure the wmode of the object and/or embed tag of the flash are set to transparent or opaque ...

it is worth a shot :)

Answer 4

The speed problem here is mainly with flash...you're asking the browser to rapidly repaint a video, not something a browsers all that great at doing. I would consider hiding the flash elements before hiding, and show them after the rest, something like this:

$(function(){
  $('#hideShowButton').toggle(function() {
    $('#div object, #anotherdiv object').hide();
    $('#div').toggle('fast');
    $('#anotherdiv').toggle('fast');
  }, function() {
    $('#div object, #anotherdiv object').show();
    $('#div').toggle('fast');
    $('#anotherdiv').toggle('fast');
  });
});