LearnFast.Ninja

jQuery animate top and bottom - up down position

Write div with id set style to position relative. Write animate and use top in the property. To see how to do it test the working example code.

Step 1: Write div with id set style to position relative.

<div id="Div1" style="position: relative; width: 200px; background-color: Orange;">

    Move div down and up

</div>


Step 2: Write animate and use top in the property.
$("#Div1").animate({ "top""+=100px" }, 900);

Working example code:

<html>

<title>jQuery</title>

<head>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#Div1").animate({ "top""+=100px" }, 900).delay(400);

            $("#Div1").animate({ "top""-=100px" }, 900);

        });

    </script>

</head>

<body>

    <div id="Div1" style="position: relative; width: 200px; background-color: Orange;">

        Move div down and up

    </div>

</body>

</html>


Result:


Tags

jquery

animate position