jQuery特效动画

jQuery提供了很多动画效果：

• 控制元素显示与隐藏
• 控制元素淡入和淡出
• 控制元素滑动
• 自定义动画

一. 控制元素显示和隐藏
以前可以通过css()方法改变元素的display属性的值达到显示（block）和隐藏（none）元素的目的。在jQuery中，提供了专门的方法控制元素的显示和隐藏，并且增加了动画效果。
show（）等同于

$(selector).css("display","block");

除了可以控制元素的显示外，还能定义显示元素时的效果，如显示速度
语法格式：

$(selector).show([speed],[callback]);

参数	说明
speed	可选，规定元素从隐藏到完全可见的速度，默认为0。可能值：毫秒，slow，normal，fast。在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变高度，宽度，外边距，内边距和透明度
callback	可选，show函数执行完后要执行的函数

hide（）与show（）方法相反，参数也是一样，常成对使用。

二，切换元素可见状态
复合事件中的toggle（） 方法，除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态，如果元素可见，单击切换后隐藏元素
关键代码：

<script type="text/javascript">
$(document).ready(function(){
       $("input[name=more_btn]").click(function(){
            $("li:gt(5):not(:last)").toggle();
         });
  });
</script>

<ul>
    <li><a href="  ">某某</a></li>
    .........
    <li class="btn">
       <input name="more_btn"  type="button" value="展开或关闭菜单项"/>
     </li>
</ul>

从代码运行效率考虑，使用toggle（）方法替代show（）和hide（）方法制作轮流切换元素的可见状态，更好。

比如京东的鼠标悬浮到一级菜单时，二级菜单显示，鼠标离开，二级菜单消失
关键代码

index=$(".inner-box").index($(this));//获取当前悬浮的index值
$(".erji-box div").eq(index).show();  //让相应二级内容显示
$(".erji-box div").eq(index).siblings().hide(); //所有相应二级的同辈元素隐藏

二, 控制元素淡入和淡出
fadeIn()方法控制元素淡入

$(selector).fadeIn([speed],[callback]);

参数和上面一样
fadeOut()方法控制元素淡出

切换元素出入状态
切换元素的淡入淡出状态的方法——fadeToggle()方法，如果元素已经淡出，fadeToggle()会向元素添加淡入效果，如果元素已经淡入，会向元素添加淡出效果，用法与toggle（）相同。

注意：jQuery中所有动画效果，都可以设置slow，normal，fast(0.6秒，0.4秒和0.2秒），这些要用双引号括起来，如fadeIn(“normal”)，而使用时间数值作为速度参数，不需要使用双引号。时间数值单位为毫秒。

三， 控制元素滑动
slideDown(),slideUp()参数和上面一致，常用于选项卡，下拉菜单和提示信息等

<script type="text/javascript">
   $(document).ready(function(){
        $(".flip").click(function(){
             $(".panel").slideDown("normal");
             });
    });
</script>

<div class="panel">
   <p>........</p>
   <p>........</p>
   <p>........</p>
 </div>
 <p class="flip">............</p>

同样也存在一个slideToggle()方法

四， 自定义动画

animate（）用来创建自定义动画

$(selector).animate({params},speed,callback);

params必选，定义形成动画的CSS属性
后面的两个参数和前面的一样