CODEWITHSUNDEEP
javascriptjquery
goldiman
goldiman

Reputation: 187

How can I apply a fadein effect to a function?

I create my whole html with JS. Here's an example:

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

When the function is executed it creates the whole markup for the page.

How can I call createBanner with a "fadeIn" jQuery effect. The elements aren't initially in the page. That's why it's not possible to select them in the common way.

Upvotes: 4

Views: 69

Answers (3)

Milind Anantwar
Milind Anantwar

Reputation: 82231

You can create the object of markup that needs to be appended, hide it using .hide(). then append it to body using .appendTo() along with .fadeIn() to give fade in effect:

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

Working Demo

Upvotes: 3

Ifeanyi Chukwu
Ifeanyi Chukwu

Reputation: 3327

Quick way as below. you could bind this to an event.

$(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>

Upvotes: 1

user2952238
user2952238

Reputation: 787

You could try to hide it after your append(); and then fade it in.

Upvotes: 1

Related Questions