How to add a fade effect to a jquery append

Question

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 1

将其包装在jq对象中，然后将其隐藏，然后使其淡入：

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

Answer 2

Ad inline style display: none to your div. Then just select it and call fadeOut on it.

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

Answer 3

试试这个代码：

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