Question

I have this CSS :

.tracklistOff{display:none;}
.tracklistOn{width:710px; float:left;}
.trackon{width:710px; float:left;}

this HTML :

<div class="tracklistOff">
    <div class="trackon">
        ... somethings...
    </div>
</div>

Now, with this code :

$('.tracklistOff').find('.trackon').clone().fadeIn(600).insertAfter('.tracklistOn');

I get the fadeIn() effect (and this for me is strange; trackon hasn’t the display:none; attribute).

With this code :

$('.tracklistOff').find('.trackon').clone().insertAfter('.tracklistOn').fadeIn(600);

the fadeIn() effect is not showed. Why changing position on the same elements fadeIn() works or not?

Answer 1

fadeIn is a shortcut to animate({ opacity: "show" }). In this function there is a condition to check if the current element is visible. If the element is already visible this function does nothing.

Therefore the issue in your code is that in the first example .trackon is not visible when fadeIn is called, instead in the second one .trackon is already visible when fadeIn is called so the function does nothing.

var working = $('.tracklistOff').find('.trackon').clone();
var notWorking = $('.tracklistOff').find('.trackon').clone().insertAfter('.tracklistOn');

console.log(working.is(':hidden')); // true
console.log(notWorking.is(':hidden')); // false