CODEWITHSUNDEEP
jquerytogglejquery-animatesmoothing
Matt
Matt

Reputation: 1133

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

Upvotes: 0

Views: 2063

Answers (4)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

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

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630379

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

Upvotes: 2

Ariel
Ariel

Reputation: 4500

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

Upvotes: 0

stimms
stimms

Reputation: 44044

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.

Upvotes: 0

Related Questions