Jquery动画

一、show()方法和hide()方法

 .show()与hide()

show()：根据hide()方法记住的display属性值来显示元素。
hide()   : 将该元素的display样式改为 "none"。

参数：slow,normal,fast,数值
$("element").show("slow");     //元素将在600毫秒内慢慢地显示出来
$("element").show("normal");   //元素将在400毫秒内慢慢地显示出来
$("element").show("fast");     //元素将在200毫秒内慢慢地显示出来
$("element").hide("1000");     //元素将在1000毫秒(1秒)内慢慢地隐藏
 

fadeIn()方法和fadeOut()方法

fadeIn()/fadeOut() 只改变元素的不透明度
fadeOut()   ：会在指定的一段时间内降低元素的不透明度，直到元素完全消失("display:none")
fadeIn()      ：与fadeOut()完全相反

 
 

slideUp()方法和slideDown()方法

slideUp()/slideDown()只改变元素的高度。

 $(function() {
        $("#btn0").click(function() {
            $("div").toggle(1000);
        })

        $("#btn1").click(function() {
            $("div").fadeOut(1000);
        })
        $("#btn2").click(function() {
            $("div").fadeIn(1000);
        })
        $("#btn3").click(function() {
            $("div").fadeToggle(1000);
        })
        $("#btn4").click(function() {
            $("div").slideDown(1000);
        })
        $("#btn5").click(function() {
            $("div").slideUp(1000);
        })
        $("#btn6").click(function() {
            $("div").slideToggle(1000);
        })
    })

 
 
自定义动画方法animate()

  animate(params, speed ,callback);

<script>
    $(function() {
        $("#btn").click(function() {
            $("div").animate({
                "left": "600px"
            }, 3000).animate({
                "top": "600px"
            }, 3000)
        })
    })
</script>