关闭

动画效果

152人阅读 评论(0) 收藏 举报
分类:

1、显示和隐藏

显示的方法show (),隐藏的方法为hide()

 

<input type="button"class="show" value="显示">

<input type="button"class="hide" value="隐藏">

<div style="height:200px;width:200px;background:red"

id="box" >div</div>

 

   $('.show').click(function(){

   $('div').show(1000);});

   $('.hide').click(function(){

   $('div').hide(1000);});

//show(),hide()中的参数1000表示速度,还可以用预设速度slownormalfast来表示,分别对应200ms400ms600ms

Egshow(‘slow‘)

默认为400ms

还有一个参数为回调函数

$('.show').click(function(){

      $('div').show('slow',function(){

        alert('over');

      });

     });

 

      $('.hide').click(function(){

      $('div').hide('slow',function(){

        alert('over');

      });

列队动画

<input type="button"class="show" value="显示">

<input type="button"class="hide" value="隐藏" >

<divstyle="background:red;float:left;padding:5px;margin-right:10px"  id="box" ></div>

<divstyle="background:red;float:left;padding:5px;margin-right:10px"  id="box" ></div>

<divstyle="background:red;float:left;padding:5px;margin-right:10px"  id="box" ></div>

<divstyle="background:red;float:left;padding:5px;margin-right:10px"  id="box" ></div>

$('.show').click(function(){

      $('div').show('slow');

   });

 

   $('.hide').click(function(){

      $('div').hide('slow');

   });

//显示的是同步动画

若要求显示列队动画,即逐个显示出来,代码如下

显示

   $('.show').click(function(){

      $('div').eq(0).show('slow',function(){

        $('div').eq(1).show('slow',function(){

           $('div').eq(2).show('slow',function(){

              $('div').eq(3).show('slow');

           });

        });

      });

隐藏

$('.hide').click(function(){

      $('div').eq(0).hide('slow',function(){

        $('div').eq(1).hide('slow',function(){

           $('div').eq(2).hide('slow',function(){

              $('div').eq(3).hide('slow');

           });

        });

      });

由于上述方法繁琐复杂,嵌套多,以下提供了简便的方法

   $('.show').click(function(){

      $('.box').first().show('slow',function tShow(){

        $(this).next().show('slow',tShow);

      });

   });

   $('.hide').click(function(){

      $('.box').first().hide('slow',function tHide(){

        $(this).next().hide('slow',tHide);});

      });

//利用函数的递归调用,逐个显示出来

toggle() 即可以切换也可以隐藏

$('.toggle').click(function(){

      $('.box').toggle('slow');

   });

//在隐藏和显示之间来回切换

  1. 滑动、卷动

向上滑动:$('.up').click(function(){

      $('.box').slideUp('slow');});

向下滑动:$('.down').click(function(){

      $('.box').slideDown('slow');

   });

切换:   $('.toggle').click(function(){

         $('.box').toggle('slow');});

  1. 淡入淡出

淡入:$('.in').click(function(){

   $('.box').fadeIn('slow');});

淡出:$('.out').click(function(){

   $('.box').fadeOut('slow');});

切换:$('.toggle').click(function(){

   $('.box').fadeToggle('slow');});

透明度到:$('.to').click(function(){

   $('.box').fadeTo('slow',0.3333);});

  1. 自定义动画animate()

animate()必须传递是参数为css键值对,可选参数为速度和回调函数

$('.button').click(function(){

      $('.box').animate({

        height:'100px',

        width:'100px',

        opacity:0.5,

        fontSize:'50px'

      },2000,function(){alert("over");});

移动位置

   $('.button').click(function(){

      $('.box').animate({

        height:'100px',

        width:'100px',

        opacity:'0.5',

        fontSize:'50px',

        left:'300px',

         top:'300px'},3000); });

//利用css位置来移动、

 

jQuery提供了累加累减的功能,移动到某位置后,继续从该位置移动

 

   $('.button').click(function(){

      $('.box').animate({

        left:'+=100px'});});

实现列队动画有两种方式:1、通过回调函数 2、通过连缀的方式

函数回调方式:

   $('.button').click(function(){

      $('.box').animate({

        height:'100px'

      },function(){

        $('.box').animate({

           width:'100px'

        },function(){

           $('.box').animate({

              fontSize:'50px'});

        });

      });

   });

   连缀方式:(对同一个元素操作的情况下)$('.box').animate({height:'100px'}).animate({width:'100px'}).animate({fontSize:'50px'});

不是同一个元素时,连缀方式不能实现列队动画,要使用嵌套回调函数才能实现列队动画,但是回调函数复杂,语义不清楚

  1. 列队动画方法

jQuery提供了类似于回调函数的方法queue()

$('.button').click(function(){

   $('.box').slideUp('slow').slideDown('slow').queue(function(next){

        next();

      $(this).css('background','orange').hide('slow');

      });

   });

//传递了一个参数,next,告诉后面还要执行动作

 

 

queue()可以得到当前动画队列长度

$('.box').queue('fx').length;

清理列队方法

$(this).clearQueue();

  1. 动画相关方法

   $('.stop').click(function(){

      $('.box').stop();});

  

但是列队动画时,只会停止第一个列队动画效果,之后后面的效果继续执行

$('.strat').click(function(){

   $('.box').animate({left:'300px'},2000).animate({bottom:'300px'},2000).animate({height:'300px'},1000).animate({width:'300px'},1000);

   });

  

   $('.stop').click(function(){

      $('.box').stop();

   });

$('.stop').click(function(){

      $('.box').stop(true); });//如果stop()中的参数为true,表示停止并且清除后面的列队动画,即动画完全停止,默认值为false

stop(true,true),第二个参数为true,停止后会跳到末尾的位置上,默认值为false

时间延迟delay()

$('.box').animate({left:'300px'}).delay(1000).animate({bottom:'300px'}).delay(1000).animate({height:'300px'}).animate({width:'300px'});

过滤器

判断当前哪一个动画正在运动

$('.strat').click(function(){

      $('.box1').slideToggle('slow',function(){

        $(this).slideToggle('slow',arguments.callee);

      });

      });

   $('.ani').click(function(){

      $(':animated').stop().css('background','blue');

   });

//查看当前运动的div,并停止运动,将其变蓝色

  1. 动画全局属性

    interval:表示运行的帧数,默认值为13,数字越小越流畅

    $.fx.interval=200

off:关闭动画

$.fx.off=true;

animate()还有一个参数:swing(缓动),liner(匀速),默认为swing

$('.button').click(function(){

      $('.box').animate({

        left:’300px’},’liner’);});

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:9305次
    • 积分:630
    • 等级:
    • 排名:千里之外
    • 原创:56篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类