Use jQuery .css() to do animation

CSS animation


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {<!--from   w  ww.  j  a  v  a 2s.com-->
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background-color: green;
}
</style>
<script
  src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
  $(function() {

    $(document).click(function() {
      var pos = $("div").css("left");
      pos = parseInt(pos);
      $("div").css("left", pos + 10);
    });
  });
</script>
</head>
<body>
  <div></div>
</body>
</html>

Click to view the demo





















Home »
  jQuery »
    jQuery Tutorial »




Basics
Selector
DOM
Event
Effect
Utilities