动画效果

原创 2015年11月20日 21:37:28

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

Qt动画效果实现

  • 2017年12月05日 09:27
  • 6KB
  • 下载

Android上百种动画效果

  • 2017年11月13日 15:06
  • 29.45MB
  • 下载

Android - 交换控件位置:基于LayoutParams的瞬间交换与基于ObjectAnimator动画效果交换

现需要交换两个控件(本文中是两个RelativeLayout),找到了两个方法: 1、使用LayoutParams改变两个layout的属性,即其相对关系(below等),实现位置的交换,但是并没有交...
  • zzukun
  • zzukun
  • 2015年07月15日 21:33
  • 3246

popupwindow设置动画效果,不起作用。

popupwindow设置动画效果,不起作用。今天在公司开发过程中遇到一个问题:为什么我使用popupwindow并给其加上动画效果时不起作用。虽然最后意识到可能是动画效果冲突的原因所导致的,但没想到...

动画效果组合

  • 2015年03月25日 13:54
  • 14.89MB
  • 下载

android 控件显示和隐藏时增加动画效果

在布局中提供属性,能简单的添加动画效果,如下: 当对布局中的view添加删除,隐藏或显示, 都会有一个淡入淡出,和位移动画.这是个默认动画 从网上搜到的方法基本都是这个...

iphone滑动动画效果

  • 2016年02月16日 10:47
  • 2KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:动画效果
举报原因:
原因补充:

(最多只允许输入30个字)