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

Question

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 1

Hiding and the fading its like running around the table :) Use the second method and set fadeIn with a "slow" parameter, like so:

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

And should be really smooth :)

Answer 2

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 3

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");