Search code examples
jqueryjquery-animatejquery-effects

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

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?

Solution

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