0

So i am having following Javascript code written in a file called "animation.js"

 $(document).ready(function() {

        /* Every time the window is scrolled ... */
        $(window).scroll( function(){

            /* Check the location of each desired element */
            $('.hideme').each( function(i){

                var bottom_of_object = $(this).position().top + $(this).outerHeight();
                var bottom_of_window = $(window).scrollTop() + $(window).height();

                /* If the object is completely visible in the window, fade it it */
                if( bottom_of_window > bottom_of_object ){

                    $(this).animate({'opacity':'1'},500);

                }

            }); 

        });

    });

I linked it to my HTML the following way

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

Now my browser tells me "$ is not defined", but if i write the code into my html with a script-tag everything works fine.

Someone has an idea?

2 Answers 2

6

You need to include jquery.js before any script which relies on it:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="animation.js"></script>
Sign up to request clarification or add additional context in comments.

Comments

0

Try to load jQuery before loading your animation.js script.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.