Scott Hunter Scott Hunter - 3 months ago 23
CSS Question

How to add a fade effect to a jquery append

I'm trying to add a fade in / fade out effect to a div that is created using jquery but I cant seem to figure it out. Any ideas ?

Heres my current code :

if (sessionStorage.getItem('hintOnce') !== 'true') {
$('body').append('<div class="control-hint"><p> Use the controls to improve your browsing experience. </p><div class="close">X</div></div>')
sessionStorage.setItem('hintOnce','true');
}

$('.control-hint').on('click',function(){
$('.control-hint').hide();
});


Thanks in advance,

Scott.

Answer

Wrap it in jq object then hide it before fading it in:

$('body').append($('<div class="control-hint"><p> Use the controls to improve your browsing experience. </p><div class="close">X</div></div>').hide().fadeIn());