Jquery基础篇6___动画效果

Posted 2020-06-18

       最近由于太忙，总是没有时间写东西，不是有句古话说时间似海绵中的水，挤挤总会有的，但感觉当了程序员之后，总是在忙着写代码，忙着学新技术，时间本来就不够，想挤挤时间抽空写点东西，总是挤不出来。忙里偷得半日闲，有时间还是写写比较好。有时候感觉自己写的这些东西不是很多人都有吗，而且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。学完之后自定义动画就可以实现了。