CODEWITHSUNDEEP
javascriptjqueryfadein
Kelb56
Kelb56

Reputation: 657

Jquery fadeIn() not working

Description: I am trying to fadeIn() my container using jquery, but it doesn't work. I'm kinda new to it, only fresh out of codeacademy jquery course.

Problem: the method I wrote in myScript.js file doesn't seem to work. The syntax looks to be ok compared to other examples. I got my js file linked to the html file like this: 

<script type="text/javascript" src="/Content/js/myScript.js"></script>

This is my index.cshtml file where I created a container for some navigation:

 <div class="container" id="fade">
        //some other buttons, divs, etc
 </div>

This is my custom js file that I included: 

$(document).ready(function () {
    $('#fade').fadeIn('slow');
});

Upvotes: 4

Views: 2042

Answers (2)

iamcryptoki
iamcryptoki

Reputation: 476

Make sure your #fade element is hidden when the page loads.

HTML

 <div class="container" id="fade">
        //some other buttons, divs, etc
 </div>

CSS

#fade { display: none }

JS

$(document).ready(function () {
    $('#fade').fadeIn('slow');
});

Upvotes: 2

ZiNNED
ZiNNED

Reputation: 2650

You should hide the div by default if you want to fade it in, otherwise it is already showing and fading in won't do anything. If that's the case, your html should look like this:

<div class="container" id="fade" style="display: none;">
    //some other buttons, divs, etc
</div>

Upvotes: 10

Related Questions