Jquery基础篇6___动画效果

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery基础篇6___动画效果相关的知识,希望对你有一定的参考价值。

       最近由于太忙,总是没有时间写东西,不是有句古话说时间似海绵中的水,挤挤总会有的,但感觉当了程序员之后,总是在忙着写代码,忙着学新技术,时间本来就不够,想挤挤时间抽空写点东西,总是挤不出来。忙里偷得半日闲,有时间还是写写比较好。有时候感觉自己写的这些东西不是很多人都有吗,而且Jquery官网上写的要比自己好多了,但是写自己的东西总会有自己的理解,有自己的想法在其中,而且印象也比较深刻。学过Jquery的人,肯定会感觉自己当时候照着例子的时候会,真正要写大型的JS代码的时候,却总写不出来,而且过不了三四个月,基本上都忘记了,说白了还是没有自己的见解,练习的也比较少,缺乏把零散的东西组织起来的能力。所以是记住了忘,忘了又得从新学;到最后的模式就像大学生看书一样,翻开的总是那么几页,学习也会陷入到瓶颈。

      废话不多说了,还是直接进入主题,学习Jquery的动画效果。

      Jquery的动画效果主要有显示,隐藏,淡入,淡出, 展开,折叠,还可以定义自己的动画效果,动画效果其实就是CSS样式的改变,对于熟练的美工人员,他们写的那个样式比较美,而且布局也相对的合理,像我这种写代码的人对于CSS都感到很烦,更不用说设计出美丽的动画效果了,不过基础的东西还是得介绍介绍,真正到了开发项目的时候,你想写这种东西,估计也没人让你写。怕不美观。接下来一一介绍这些内容

     显示,隐藏:

      方法:hide,show,toggle(若是显示则隐藏,若是隐藏则显示)

      参数:show(time,function()),这里的time是以毫秒为单位的,指的是隐藏的时间和显示的时间,不过有三个固定的值,‘fast’,‘slow’,‘normal‘。当不传递参数的时候默认是400毫秒,fast是200毫秒,slow是600毫秒。function表示执行完动画效果之后继续执行              该函数

     场景:一闪一闪的效果,

    $("#divArea").hide(1000).delay(400).show(1000,function all(){
             $("#divArea").hide(1000).delay(400).show(1000,all);
    });

       场景二就是提示信息渐渐退出,就是什么登陆成功了,什么密码错误了,用户名不正确了等等这些东西。这里的delay方法是延迟的意思,hide(1000)这个动画效果执行完之后,等待400毫秒之后,才开始执行show(1000)的动画效果。

  淡入,淡出:

    方法:fadeIn,fadeOut,fadeToggle,fadeTo()

    参数:fadeTo(time,Opacity),第一个参数是时间的意思,第二个参数是透明度,这个数值是1到0,按百分比来计算。

    场景:开发中用到的场景就是提示消息慢慢淡出。用法跟之前的相似。

   展开,折叠:

    方法:slideup(),slidedown(),slideToggle()

    参数:slideup(time,function()),这里的参数和之前的相同,所以不在介绍了,自己练习一下立马就看出来效果了。

  自定义动画:

    方法:animate(css,time,function)

   参数:css表示一段CSS样式,类似于{background:‘red‘,height:400px}。time表示时间,和之前的相同,function也和之前相同,

  场景:动画效果实际上就是CSS效果的变化,我们实现一个滑动的效果,每过一段时间,往右边滑动一定的距离。

   

1     var number =0;
2    $("#divArea").animate({
3        ‘margin-left‘: number+‘px‘
4    },1000,function GoLeft(){
5       number = (number + 100)%screen.availWidth;
6       $("#divArea").animate({‘margin-left‘:number+‘px‘},1000,GoLeft);
7    })

 

  队列动画:

  方法:其实就是在Function函数里继续写上之前的动作。

  场景:一个接一个隐藏所有DIV元素。

   $("div").first().hide(‘slow‘,function(){
       $(this).next().hide(‘slow‘,arguments.callee);
   })

 

停止动画,完成动画:

方法:finish,stop,

参数:stop(clearQueue,goToEnd),这两个值是布尔值,clearQueue意思是清除后续的动作,如果为true时表示只执行该动画,如果为false时表示执行该动画之后还执行后续的动画。goToEnd表示的动画最终的效果,如果为true时,表示调到该动画的最终效果,false的时候会在点击停止的时候即停止。而finish没有任何参数,表示的是直接达到所有动画都执行完之后的效果。

演示效果,请参考:http://www.jquery123.com/finish/

至此基本的动画效果都介绍完毕了,但是要达到那种美化的效果,还是多学学CSS。学完之后自定义动画就可以实现了。 

      

以上是关于Jquery基础篇6___动画效果的主要内容,如果未能解决你的问题,请参考以下文章

从零开始学_JavaScript_系列——jquery(基础,选择器,触发条件,动画,回调函数)

JS框架_(JQuery.js)点赞按钮动画

JQuery基础一_式样篇

JS框架_(JQuery.js)夜晚天空满天星星闪烁动画

jQuery学习笔记

小超_Androidandroid上开源的酷炫的交互动画和视觉效果:Interactive-animation