Move an element by changing left during animation in jQuery

Description

The following code shows how to move an element by changing left during animation.

Example


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {<!--from  w w  w.  j a  v a 2s  . c  o  m-->
  position: relative;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  background-color: blue;
}
</style>
<script
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
  $(function() {
    $(document).click(function(event) {
      $("div#box").animate({
        left : '+=100px'
      }, 200);
    });
  });
</script>
</head>
<body>
  <div id="box"></div>
</body>
</html>

Click to view the demo





















Home »
  jQuery »
    jQuery Example »




Animation
DOM
Event
Form
List
Select
Style
Table
Utilities