动画效果


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’);});

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012246905/article/details/49952277
个人分类: JQuery学习
上一篇jQuery高级事件
下一篇ajax
博主设置当前文章不允许评论。

C# 窗体的动画效果

2009年04月23日 8KB 下载

google首页动画效果

2010年08月09日 32KB 下载

animation动画效果

2011年11月14日 17KB 下载

动画效果的grid分页

2009年03月12日 424KB 下载

复古卷轴PPT模板.ppt

2011年05月07日 395KB 下载

羽哥位移的血轮眼

2014年12月05日 1.22MB 下载

Android实例(各种动画小例子)

2012年11月17日 562KB 下载

没有更多推荐了,返回首页

关闭
关闭