CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ivan
Ivan

Reputation: 67

How can I fade a div after the page is loaded using jQuery?

I'm trying to fade the Movies div of this HTML

<div class="row">
  <div id=Movies class="col-md-4">
   <h2>Movies</h2>
  <p>Some text.</p>

 </div>
</div>

and I'm using this jquery code

<script>
    $(function(){$("#Movies").show("slow");
                });
</script>

I've also tried this:

<script>         
          $(document).ready(function(){$("#Movies").fadeIn(3000);
                             });
</script>

But it ain't working. The page loads with no fade in. The div just loads like every other element. What's wrong with this?

Upvotes: 1

Views: 407

Answers (3)

raddykrish
raddykrish

Reputation: 1866

First you have to hide the movies div and then fade in. Also i see that your id "Movies" is not withing quotes in the question code snippet. Hope it helps.

Html

<div class="row">
  <div id="Movies" class="col-md-4" style="display:none">
   <h2>Movies</h2>
  <p>Some text.</p>
 </div>
</div>

Javascript

 $(document).ready(function(){
     $("#Movies").fadeIn(3000);
});

Upvotes: 0

Sleek Geek
Sleek Geek

Reputation: 4686

For that to work; #movie has to be hidden, then show when the document is ready as the jQuery function implies. 

$(document).ready(function() {
  
  $("#movies").fadeIn(3000);
                             
});
#movies {
  display: none;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div id=movies class="col-md-4">
   <h2>Movies</h2>
  <p>Some text.</p>

 </div>
</div>

Upvotes: 0

void
void

Reputation: 36703

Add this CSS to make it hidden, then only it will fadeIn slowly when the page loads 

#Movies {
display:none;
}

Upvotes: 2

Related Questions