jq动画

行内样式 display

隐藏display：none ;显示 display：原始值;  如果没有原始值，则删除display样式

动画的路线 左上角<->右下角

 

基本

show：显示隐藏的匹配元素。

例：

 $(".show").click(function(){

          $("div").show()

          $("div").show("slow") normal fast

          $("div").show(1000)

 })

hide：隐藏显示的元素

例：

            $(".hide").click(function(){

                $("div").hide()

            })

toggle：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

例：

            $(".toggle").click(function(){

                $("div").toggle()

            })

 

滑动

        行内样式 height

        动画路线 上<->下

slideDown：通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

例：

            $(".slideDown").click(function(){

                $("div").slideDown(2000)

            })

slideUp：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

例：

            $(".slideUp").click(function(){

                $("div").slideUp()

            })

 

淡入淡出

fadeIn：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

例

            $(".fadeIn").click(function(){

                $("div").fadeIn()

            })

 

fadeOut：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

例

            $(".fadeOut").click(function(){

                $("div").fadeOut()

            })

 

fadeToggle：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

例

            $(".fadeToggle").click(function(){

                $("div").fadeToggle()

            })

 

fadeTo：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

例：

            $(".fadeTo").click(function(){

                $("div").fadeTo("normal",0.3)

            })

自定义

stop： 终止动画，删除所有排队的动画，在最后一次的基础上，继续新动画

例：

            $(".slideToggle").click(function(){

                $("div").stop.slideToggle(3000)

            })

finish：  完成所有动画，开始新动画

例：

            $(".slideToggle").click(function(){

                $("div").finish.slideToggle(3000)

            })

animate：用于创建自定义动画的函数。

例：

 

            $(".animate").click(function(){

                    $("div").animate({width:"400px"},1000)

                    $("div").animate({width:"400px",height:"400px"},2000)

                    $("div").animate({width:"+=40px",height:"+=40px",opacity:0.3},2000)

            })

HTML内容：

    <button class="show">show</button>

    <button class="hide">hide</button>

    <button class="toggle">toggle</button>

    <br>

    <button class="slideDown">slideDown</button>

    <button class="slideUp">slideUp</button>

    <button class="slideToggle">slideToggle</button>

    <br>

    <button class="fadeIn">fadeIn</button>

    <button class="fadeOut">fadeOut</button>

    <button class="fadeToggle">fadeToggle</button>

    <button class="fadeTo">fadeTo(0.3)</button>

    <br>

    <button class="animate">animate</button>

    <button class="animate"></button>

    <button class="animate"></button>

    <div></div>