0

(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');
    }
});
Community
  • 1
  • 1
Terf
  • 51
  • 8

1 Answers1

2

You have an error at

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

Remove the semicolon after top: '0px'

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

  • A second pair of eyes is always great. If there's a better site for catching simple errors like this, I'll bother them instead. Thanks a bunch, man. – Terf Jul 31 '14 at 16:49
  • I found it by using the developer console in google chrome, just hit F12 or Menu->Tools->Javascript Console – Michael Bearjaws Jul 31 '14 at 16:56
  • Oh nice, I've just been writing in Notepad++ and testing it in Pale Moon browser. I'll try to use Chrome to catch more errors, though. Thanks again. – Terf Jul 31 '14 at 17:13
  • Okay, it seem Chrome has some problems with refreshing, but Pale Moon has a console I think I can make use of too. – Terf Jul 31 '14 at 17:26