I'm using the following javascript to animate a div, but the div isn't animating... does anyone know what can be?

JavaScript:

 <script language="JavaScript">   
    $(document).ready(function(){
    $('#LayoutDiv1').animate({top: "500px"}, 1500); }); 
    </script>

HTML:

<div id="LayoutDiv1">
    <img src="images/logo.png">
</div>

CSS:

#LayoutDiv1 {
    clear: both;
    float: left;
    width: 100%;
    display: block;
}

I'm using the following javascript to animate a div, but the div isn't animating... does anyone know what can be?

JavaScript:

 <script language="JavaScript">   
    $(document).ready(function(){
    $('#LayoutDiv1').animate({top: "500px"}, 1500); }); 
    </script>

HTML:

<div id="LayoutDiv1">
    <img src="images/logo.png">
</div>

CSS:

#LayoutDiv1 {
    clear: both;
    float: left;
    width: 100%;
    display: block;
}

• javascript
• jquery

2 Answers 2

Working Demo : http://jsfiddle/LRuZp/3/

The position property should be specified, when defining top, left, bottom and right properties.

you need to set your div position to relative

#LayoutDiv1 {
    clear: both;
    float: left;
    width: 100%;
    display: block;

    position: relative

}