$ not defined when running jQuery

I have the following code and whenever I load it with HTML, the console gives an error right after loading.

Uncaught ReferenceError: $ is not defined

My script is linked to the HTML file like so: <script src="src-animation.js"></script> in the <head>.

Here is my jQuery:

$(document).ready(function(){
    $('.play').click(function() {
        $(this).fadeOut('slow');
        $(this).append("<h1>Now loading...</h1>");
    });
    $('.not-rdy').click(function(){
        alert("This chapter isn't done yet.\nComing soon!");
        $(this).fadeOut('fast');
    });
    $('#updateCHK').click(function() {
        alert("Server is temporarily unavailable.\nTry again later.");
    });
});

What am I doing wrong?

Solution

The sequence of loading the external JavaScript files is important. You must include the <script> for jQuery before the <script> for your custom .js file.

So, in the <head>

<script src="jquery.js"></script>
<script src="src-animation.js"></script>

Substitute the proper name of your particular jQuery .js file.

Alternately, you can use a CDN version of the jQuery file. That means that you are causing the client browser to download the jQuery .js file from another web server. In that case, you would do something like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script src="src-animation.js"></script>