隐藏和显示效果js动画

<div id='ctt' style='margin-left: 50px; color: white'>

            <input type="button" name="name" value="show()显示效果" onclick='show3()' />

            <input type="button" name="name" value="hide()隐藏效果" onclick='hide3()' />

            <input type="button" name="name" value="toggle()隐藏显示自动切换" onclick='toggle3()' />

            <input type="button" name="name" value="slideDown()" onclick='slide3()' />

            <input type="button" name="name" value="toggle" onclick='toggle3()' />

            <input type="button" name="name" value="fadeIn3" onclick='fadeIn3()' />

            <input type="button" name="name" value="自定义左到右消失"  onclick='animate3()'/>

             <input type="button" name="name" value="自定义右到左展开"  onclick='animate4()'/>

            <div id='div1' style=' color:Yellow;  height: 80px; display: none; overflow:hidden'>

            <div  id="div1span"> I am a div!</div>

           

            </div>

        </div>

<script type="text/javascript">

 function show3() {

 

        /*【.show(speed,easong,fn)】

        会把display为none的div（已经是show的则没有效果），从上到下（同时从左到右）在1000毫秒内展示；

       

        第一个参数： 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)；

        第二个参数：默认是"swing"，可用参数"linear"，通常不写；

        第三个参数：可写可不写，表示完成后执行函数

 

        局限性：从上到下（同时从左到右），方向的不可控性；

        */

        $("#div1").show(1000, "swing", function () { alert("动画显示完成!"); });

    }

    function hide3() {

        /*

        hide()同show();

        */

        $("#div1").hide(1000, "swing", function () { alert("动画隐藏完成!"); });

    }

    function toggle3() {

        /*

        自动判断，是隐藏则显示；是显示则隐藏

        */

        $("#div1").toggle(1000, "swing", function () { alert("动画自处理完成!"); });

    }

    function slide3() {

        /*

        slideDown()向下显示，show()是水平与垂直方向同时展开，而slideDown是仅仅在垂直方向向下展开;

        slideUp()向上隐藏,　　hide()是水平与垂直两个方向的，而slideUp()仅仅是垂直方向向上收起隐藏

        */

        $("#div1").slideDown(1000, "swing", function () { alert("动画显示完成!"); });

    }

 

    function toggle3() {

        /*

        slideToggle垂直方向上自动切换,toggle是水平与垂直两个方向上的，而slideToggle是仅仅垂直方向的。

        */

        $("#div1").toggle(1000, "swing", function () { alert("动画显示完成!"); });

    }

    function fadeIn3() {

        /*

        fadeIn() 以改变透明度来显示;

        fadeOut() 以改变透明度来隐藏;

        fadeToggle() 以改变透明度来切换显示隐藏状态;

        */

        $("#div1").fadeIn(3000, function () { alert("淡入显示成功!"); });

    }

    function fadeto3() {

        /*

        fadeTo() 由指定的时间将透明度改变到指定的透明度

        */

        $("#div1").fadeTo(3000, 0.22, function () { alert("透明度改变成功!"); });

    }

    function animate3() {

        /*

        animate(params,speed,easing,callback);　　样式参数，时间，可选择，函数

        其中params要用中括号括起来，可以使用的css样式参数。注意要采用骆驼法则，如font-size要写成fontSize。颜色渐变不支持。

 

        backgroundPosition

        borderWidth

        borderBottomWidth

        borderLeftWidth

        borderRightWidth

        borderTopWidth

        borderSpacing

        margin

        marginBottom

        marginLeft

        marginRight

        marginTop

        outlineWidth

        padding

        paddingBottom

        paddingLeft

        paddingRight

        paddingTop

        height

        width

        maxHeight

        maxWidth

        minHeight

        maxWidth

        font

        fontSize

        bottom

        left

        right

        top

        letterSpacing

        wordSpacing

        lineHeight

        textIndent

        */

        $("#div1").animate({"width":"0px","marginLeft":"50px"},3000);

        //这样就模拟地呈现出了 自左向右的隐藏

 

    }

    function animate4() {

        $("#div1").animate({ "": "", "": "" }, 3000);

    }

</script> 

show()　slideup()  fadeout() 
hide()  slidedown() fadein() 
toggle() slidetoggle ()  
animate()