JQuery wont work for me please help - what am i doing wrong?

JQuery wont work for me please help - what am i doing wrong?

I am trying to get my jquery code working I have copied examples off the internet and opened them using the latest firefox and chrome, the CSS works because the boxes are styled but the jquery does not work as the different color boxes don't change size when i mouse over them and click on them.

 I have spent days trying to figure this out as I really want to get started.. Please Help!!!!!!!!!!!!!!

I have a parent folder called Master Website and this is how it is :-

Master Website,
   Js
      app.js
   Css
      style.css

Index.html


Index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <div id="red"></div>
    <div id="blue"></div>
    <div id="yellow"></div>
    <div id="green"></div>
    <script src=" http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

Style.css

div {
    height:100px;
    width:100px;
    display: inline-block;
}

#red {
    background-color:#FF0000;
}

#blue {
    background-color:#0000FF;
}

#yellow {
    background-color:#E2BE22;
}

#green {
    background-color:#008800;
}

App.js

$(document).ready(function() {
   $('div').mouseenter(function() {
       $(this).animate({
           height: '+=10px'
       });
   });
   $('div').mouseleave(function() {
       $(this).animate({
           height: '-=10px'
       });
   });
   $('div').click(function() {
       $(this).toggle(1000);
   });
});


 I would be hugely grateful for any help....