jquery入门（四）——动画效果

1.show方法

jQuery中用来显示已经被隐藏的元素的方法是使用show(speed,[callback])函数。

数名	show(speed,[callback])
作用	以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度
返回值	jQuery
参数	speed (String,Number)：三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) callback (Function)：在动画完成时执行的函数，每个元素执行一次。

例如：将display值为none的tr显示出来
js:

 $("tr:hidden").show();

html:

  <tr style="display: none;"><th>Header</th></tr>

2.toggle方法

jQuery中用于实现交替显示隐藏的函数是toggle(speed,[callback]) 。
例如：
css:

    .d1{
                    color: #f00;
                    font-family: "楷体";
                    font-size: 16px;
                }

js：

   $("#btn3").click(function(){
                    $("div").toggleClass("d1");    
                    });

html:

    <input type="button" id="btn3" value="添加删除样式" />

3.dlideUp向上收缩效果

所谓向下收缩效果就是对页面元素通过高度变化来动态地隐藏。在jQuery中实现该效果的函数是slideUp(speed,[callback]) 。
例如：
js：

    $("#d1").bind("click",function(){
                $("#menu1").slideUp();
            });

4.slideDown

jQuery中用于实现向上滑动展开元素内容的函数为slideDown(speed,[callback]) 。
js：

    $("#d2").click(function(){
                    //向上展开
                    $("#menu2").slideDown();
                });

5.slideToggle

交替伸缩样式和交替显示隐藏类似，都是当用户单击时，如果操作的页面元素是显示状态，则将其隐藏，如果其是隐藏的，则将其显示出来。只不过这里显示的动画效果是向上或者向下滑动。jQuery中处理交替伸缩样式的函数是slideToggle(speed,[callback]) 。

js：

    $("#d3").click(function(){
     //自动展开或收缩 
     $("#menu3").slideToggle(); });

3.4.5使用一个表格实现效果的展示：

    <table  cellspacing="" cellpadding="">
                <tr align="center">
                <td  width="150px" id="d1">Data</td>
                <td  width="150px" id="d2">Data</td>
                <td  width="150px" id="d3">Data</td>
                </tr>
                <tr >
                <td width="150px">
                    <ul id="menu1">
                        <li>javaweb</li>
                        <li>c++</li>
                        <li>javascript</li>
                    </ul>
                </td>
                <td width="150px">
                    <ul id="menu2">
                        <li>javaweb</li>
                        <li>c++</li>
                        <li>javascript</li>
                    </ul>
                </td>
                <td width="150px">
                    <ul id="menu3">
                        <li>javaweb</li>
                        <li>c++</li>
                        <li>javascript</li>
                    </ul>
                </td>
                </tr>
            </table>

6.淡入效果

淡入效果是指页面上元素的透明度不断减小，直到清晰显示出来的效果。在jQuery中实现淡入效果使用fadeIn(speed,[callback])函数。
js：

    $("#btn1").click(function(){
                        //淡入效果
                        $("#d1").fadeIn(1000);
                    });

7.fadeOut

淡出效果是指页面上元素的透明度不断增大，直到消失不见的效果。jQuery中处理淡出效果的是fadeOut(speed,[callback])函数。
js:

    $("#btn2").click(function(){
                        //淡出效果
                        $("#d1").fadeOut(1000);
                    });

8.fadeToggle

交替实现淡出淡入
js:

  $("#btn3").click(function(){
                        //淡出或淡出
                        $("#d1").fadeToggle(1000);
                    });

css：

 <input type="button" id="btn1" value="淡入" />
            <input type="button" id="btn2" value="淡出" />
            <input type="button" id="btn3" value="淡出或淡出" />
            <div id="d1">
                <img src="img/图片1.png"/>
            </div>