jQuery入门[6]-动画

jQuery入门[1]-构造函数
jQuery入门[2]-选择器
jQuery入门[3]-事件
jQuery入门[4]-链式代码
jQuery入门[5]-AJAX
jQuery入门[6]-动画
jQuery直接各种动画,常见的被封装成各种方法,如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方法,所以动画不断循环。
posted @ 2008-03-05 16:57 Think 阅读(...) 评论(...) 编辑 收藏