June 19, 2010

In jQuery, is prepend().hide().fadeIn() not so smooth?

Question by 動靜能量

in jQuery, will the following be not so smooth?

$('<a href= ... ><img src= ...  /></a>').prependTo($('#someDiv')).hide().fadeIn()

Will it actually shows the added element for a split second, and then hide it, and then fadeIn ?

Then will the animation be not so smooth?

Is there any better method?

Or the following?

$('<a style="display:none" href= ... ><img src= ...  /></a>').prependTo($('#someDiv')).fadeIn()

or

$('<a href= ... ><img src= ...  /></a>').hide().prependTo($('#someDiv')).fadeIn()

Update: the original was

$('#someDiv').prepend('<a href= ><img src  /></a>').hide().fadeIn()

which actually may be hiding the #someDiv and then fading it in?

Answer by Nick Craver

You can rearrange it a bit using .prependTo(), like this:

$('<a href= ... ><img src= ...  /></a>').hide().prependTo('#someDiv').fadeIn();

This allows you to call .hide() before adding it, so no visual artifacts.

Answer by Starx

How about fading it first and then prepending it and only showing it then, quite smooth right?

$('#someDiv').fadeOut("fast").prepend('<a style="display:none" href= ><img src  /></a>').fadeIn("slow");
...

Please fill the form - I will response as fast as I can!