Really smooth animate effects with jQuery

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. :)

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');
  });
});

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.

@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.

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 :)