jQuery入门[6]－动画

jQuery入门[6]－动画2011-11-01 cnblogs thinhunan LynjQuery直接各种动画，常见的被封装成各种方法，如show（）/hide（）/slideDown（）/fadeIn（）等等，参见：Effects

最灵活的则属于animate（ params, [duration], [easing], [callback] ）方法，参见：animate

其中params为动画的运行结果，可以为各种样式属性，jQuery将在duration指定的时间内，将对象的当前状态渐变为params参数指定的值。如：

$（"#go"）.click（function（）{
   $（"#block"）.animate（{
    width:"70%",
    opacity:0.4,
    marginLeft:"0.6in",
    fontSize:"3em",
    borderWidth:"10px"
   },1500）;
  }）;

params也可以是一些相对数据：

$（"#right"）.click（function（）{
   $（".block"）.animate （{"left":"+=50px"},"slow"）;
  }）;
  $（"#left"）.click（function（）{
   $（".block"）.animate（{"left":"- =50px"},"slow"）;
  }）;

通过stop（）函数可将对象再在执行的动画暂停。选择符:animated可以判断对象是否处在动画运行状态。

以下为来自官网的一个例子：

<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><script src="http://code.jquery.com/jquery-latest.js"></script><script>$（document）.ready（function（）{$（"#show"）.click（function （） {var n = $（"div"）.queue（"fx"）;$（"span"）.text（"Queue length is: " + n.length）;}）;function runIt（） {$（"div"）.show（"slow"）;$（"div"）.animate（{left:"+=200"},2000）;$（"div"）.slideToggle（1000）;$（"div"）.slideToggle（"fast"）;$（"div"）.animate（{left:"-=200"},1500）;$（"div"）.hide（"slow"）;$（"div"）.show（1200）;$（"div"）.slideUp（"normal", runIt）;}runIt（）;}）;</script><style>div { margin:3px; width:40px; height:40px;position:absolute; left:0px; top:30px;background:green; display:none; }div.newcolor { background:blue; }span { color:red; }</style></head><body><button id="show">Show Length of Queue</button><span></span><div></div></body></html>

效果为不断变化的一个方块，因为最后一个动画$（"div"）.slideUp （"normal",runIt）执行后又调用runIt方法，所以动画不断循环。