您的位置:知识库 » Web前端

jQuery入门[6]-动画

作者: Think  来源: 博客园  发布时间: 2009-12-20 20:53  阅读: 1445 次  推荐: 0   原文链接   [收藏]  

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 Queuebutton>
  
<span>span>
  
<div>div>
body>
html>

效果为不断变化的一个方块,因为最后一个动画$("div").slideUp("normal", runIt)执行后又

调用runIt方法,所以动画不断循环。

0
0
标签:jQuery

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻