CODEWITHSUNDEEP
javascriptjqueryanimation
Terf
Terf

Reputation: 51

Cannot get jQuery animation function to fire

(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');
    }
});

Upvotes: 0

Views: 66

Answers (1)

Michael Bearjaws
Michael Bearjaws

Reputation: 201

You have an error at 

$("#home1").animate({
             top: '0px';
       }, 1000, '

Remove the semicolon after top: '0px'

JS Fiddle Example: http://jsfiddle.net/W3GBV/

Upvotes: 2

Related Questions