.css() does animation

CSS animation


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {<!-- w w  w  . j av a 2s  .c  o m-->
  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

The code above generates the following result.

.css() does animation
Home »
  Javascript Tutorial »
    jQuery Reference »
      Effect
Javascript Tutorial Effect
.animate()
.css() does animation
.clearQueue()
.delay()
.dequeue()
.extend()
.fadeIn()
.fadeOut()
.fadeTo()
.hide()
.queue()
.show()
.slideDown()
.slideToggle()
.slideUp()
.stop()
.toggle()