JQuery动画

一，show和hide动画

案例：点击收缩和展开（相似于QQ面板的效果）

 <script language="javascript">
        $(document).ready(function () {
            $("#t1").click(function () {
                if ($("#t2").css("display")!="none") {
                    $("#t2").hide(3000, function () {
                        $("#t1").html("点击展开");
                    });  //3000表明时间，3000毫秒  逗号后面跟的是回调函数，hide执行完以后调用
                }
                else {
                    $("#t2").show(3000, function () {
                        $("#t1").html("点击收缩");
                    });
                }
            });
        })
    </script>

二，fadeIn和fadeOut动画（它只是一种颜色的渐变，透明到不透明的渐变）

案例：同上

  <script language="javascript">
        $(document).ready(function () {
            $("#t1").click(function () {
                if ($("#t2").css("display")!="none") {
                    $("#t2").fadeOut(3000, function () {
                        $("#t1").html("点击展开");
                    });  
                }
                else {
                    $("#t2").fadeIn(3000, function () {
                        $("#t1").html("点击收缩");
                    });
                }
            });
        })
    </script>

三，slideUp和slideDown动画（相似于卷帘门的效果）

案例：同上

<script language="javascript">
        $(document).ready(function () {
            $("#t1").click(function () {
                if ($("#t2").css("display")!="none") {
                    $("#t2").slideUp(3000, function () {
                        $("#t1").html("点击展开");
                    });  
                }
                else {
                    $("#t2").slideDown(3000, function () {
                        $("#t1").html("点击收缩");
                    });
                }
            });
        })
    </script>

四，自定义动画animate（）

animate（params，speed，callback）有三个参数

params：包含样式{属性：值的一组参数}  如：{background-color:"red",color:"blue",height:"160px"}

speed:动画显示的速度，以毫秒为单位

callback：回调函数