Geek Answers Handbook

How can I apply the fadein effect to a function?

I create my entire html using JS. Here is an example:

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

When a function is executed, it creates all the markup for the page.

How can I call createBanner with jQuery "fadeIn" effect. Elements are not initially on the page. That is why they cannot be selected in the usual way.

+4
source share
3 answers

You can create a markup object to be added, hide it with .hide(). then add it to the body using .appendTo()together with .fadeIn()to give a fading effect:

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

Working demo

+3
source

You can try to hide it after your append (); and then shades it.

+1

, . .

$(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>
Hide result
+1

More articles:


All Articles