jQuery入门[6]－动画

最新推荐文章于 2025-08-19 08:41:01 发布

njit_peiyuan

最新推荐文章于 2025-08-19 08:41:01 发布

阅读量61

点赞数

文章标签： javascript ViewUI

本文详细介绍了jQuery中的动画功能，包括预定义动画方法如show()、hide()等，以及更灵活的animate()方法。通过实例展示了如何使用这些方法实现复杂的动画效果，并讲解了如何控制动画队列及暂停动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转自： http://thinhunan.cnblogs.com/archive/2008/03/05/1092149.html