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方法，所以动画不断循环。

千百度

1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。

2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。

3.本文采用知识共享署名4.0国际许可协议 [BY-NC-SA] 进行授权

4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。