What is wrong with my jQuery code? I want a div to fade in

Question

I recently started learning some jQuery. I want to fade in a div but nothing is happening. Can someone please tell me what is wrong?

Everthing is linked so that's not the problem:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="inc/content_animate.js"></script>

content_animate is my .js file. This is in it:

$(document).ready(function(){
    $('.content').fadeIn('fast');
});

I want to fade in my .content div. Which is this:

<div class="content">
  <img src="img/design.svg">
  <h2>Design</h2>
  <p>I don't only program my websites. I also design my websites myself.</p>
  <a class="btn-content" href="projects.php">Learn more</a>
</div>

What did I do wrong? Thanks in advance to everyone looking into this!

Answer 1

your code is fine, but if you dont hide your div initially, theres nothing to fade in, because its already showing.

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

 .content { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <img src="img/design.svg"> <h2>Design</h2> <p>I don't only program my websites. I also design my websites myself.</p> <a class="btn-content" href="projects.php">Learn more</a> </div> 

Answer 2

$(".content").hide().fadeIn('fast')