In jQuery, is prepend().hide().fadeIn() not so smooth?
-
28-09-2019 - |
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?
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.
OTHER TIPS
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 :)
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");
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow