Как применить эффект fadein к функции?

Question

Я создаю свой весь html с помощью JS. Вот пример:

function createBanner() { 
    $('body').append(
     $('<div>') 
     .attr('id',"banner") 
     .attr('class',"banner") 
     .append(
     ....   

Когда функция выполнена, она создает всю разметку для страницы.

Как я могу вызвать createBanner с эффектом jQuery «fadeIn». Элементы изначально не находятся на странице. Вот почему их невозможно выбрать обычным способом.

Answer 1

Вы можете создать объект разметки, который должен быть добавлен, скрыть его, используя .hide(). затем добавить его к телу, используя .appendTo() вместе с .fadeIn() дать эффект плавного увеличения громкости:

$('<div>').attr('id',"banner").attr('class',"banner").append(....) 
     .hide() 
     .appendTo("body") 
      .fadeIn(500); 

Working Demo

Answer 2

Вы можете попытаться скрыть его после добавления append(); а затем затухают.

Answer 3

Быстрый путь, как показано ниже. вы можете связать это с событием.

$(function(){ 
 
    var dv = $('<div>'); 
 
    $('body').append(dv.attr('id',"banner").attr('class',"banner").html("Some kind of content")); 
 
    $('.banner').last().fadeIn(3000) 
 

 
})

.banner{ 
 
    display:none; 
 
    font-size: 70px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>