jQuery动画与特效

1.1元素的显示与隐藏以及淡入淡出的动画效果

总结如下：

1.png

使用方法及示例如下：

//显示页面中的元素
show(duration,[fn]);

//隐藏页面中的元素
hide(duration,[fn]);

//模拟鼠标的连续单击事件
toggle(duration,[fn]);

//改变元素的透明度
fadeIn(duration,[fn]);
fadeOut(dutation,[fn]);
fadeToggle(duration,[fn]);

//调整透明度的值
fadeTo(duration,opacity,[fn]);

[ duration ]: 表示动画运行的时间，可以使用关键字slow、normal和fast，分别对应时间长度0.6秒0.4秒和0.2秒 [ fn ]: 表示在动画完成时执行的函数。
[ opacity ]: 用于指定不透明值，取值范围是0-1,0代表完全透明，1代表完全不透明

示例：

例：为页面添加一个“显示”按钮，当单击“显示”按钮时，将以动画的方式显示一幅图片完成时执行函数，实现为显示的图片添加边框样式的功能。再一次单击按钮，显示的图片以动画的方式隐藏

<head>
      <script src="jquery-1.11.0.min.js"></script>
      <style>
                 img{
                           display:none;//图片默认不显示
                 }
      </style>
</head>
<body>
      <p><img src="two.jpg" id="pic" /></p>
      <input type="botton" value="显示"  id="btn" />
      <script type="text/javascript">
               $(function(){
                        $("#btn").click(function(){
                                if($(this).val() =="显示"){
                                      $("#pic").show("slow",function(){
                                              $(this).css({"border" :"1px solid #ccc","padding":"5px"});
                                      });
                                $(this).val("隐藏")
                                }else{
                                       $("#pic").hide("slow");
                                       $(this).val("显示");
                                }
                         });
               });
      </script>
</body>

1.2 滑入与滑出动画效果
1.2.1 slideDown()方法、slideUp()方法与slideToggle()方法
①slideDown()方法会动态改变当前元素的高度，由上到下滑入，高度向下增大，呈现出一种“滑动”的效果.
②slideUp()方法会动态改变当前元素的高度，由下到上滑出，高度向上减小，最终隐藏当前元素.
③slideToggle()方法会动态改变当前元素的高度，最终切换当前元素的可见状态(如果元素是可见的，则通过滑出效果切换为隐藏状态；如果元素是隐藏的，则通过滑入效果切换为可见状态
【使用方法同show()一致】
例：

<script type="text/javascript">
        $(function(){
               $(".secondLi").click(function(){
                       $(".secondLi ul").slideToggle(500);
                });
          });
</script>

jQuery动画与特效

推荐阅读更多精彩内容