(Javascript/jQuery newbie)
I'm practicing putting all my Javascript into a single .js file (it's a small personal site), and am trying to have specific functions fire when a specific body#div exists. (I based the code off One JS File for Multiple Pages, but there may be a better way to write it.)
For some reason (perhaps when trying to access another #home1), the animation will not run. I can get an alert to be called prior to animation, but something is wrong with the actual animation function.
Thanks in advance.
HTML:
<script type="text/javascript" src="javascript/jquery-1.11.1.js"></script>
<script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="javascript/script.js"></script>
<link href="css/hover/css/hover.css" rel="stylesheet" media="all">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="home">
    <div class="container">
        <p>Website content here</p>
    </div>
    <div class="footer">
        <div id="home1"></div>
        <div id="home2"></div>
    </div>
</body>
CSS:
#home1 {
    position: relative;
    top: -400px;
    margin-left: auto;
    margin-right: auto;
    width: 40px;
    height: 40px;
    background-color: yellow;
}
JS:
$(document).ready(function() {
    if ($("body#home").length > 0) {
       //alert("dhd");
       $("#home1").animate({
             top: '0px';
       }, 1000, 'easeOutBounce');
    }
});