总结用于交互的四个动画方法

toggle

toggle(speed,[callback])

切换元素的可见状态。如果元素可见，切换为隐藏；隐藏则切换为可见。 例子如下：

$("#btn").click(function(){
                $(this).next().toggle()
            })

代码演示

在1.9版本以下的jQuery中，相当于

            $("#btn").toggle(function(){
                $(this).next().hide()
            },
            function(){
                $(this).next().show()
            })

slidToggle

slideToggle(speed,[casing],[callback])

通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。如下例:

$("#btn").click(function(){
                $(this).next().slideToggle()
            })

代码演示

在1.9版本以下的jQuery中，相当于

            $("#btn").toggle(function(){
                $(this).next().slideUp()
            },
            function(){
                $(this).next().slideDown()
            })

fadeTo

fadeTo(speed,opacity,[callback])

把元素的不透明度以渐进方式调整到指定的值，只调整元素的不透明度，高度和宽度不发生变化。示例如下：

$("#btn").click(function(){
                $(this).next().fadeTo(600,0)
            })

代码演示

fadeToggle(speed,[easing],[callback])

通过不透明度变化来切换匹配元素的可见性，只调整元素的不透明度。示例如下：

$("#btn").click(function(){
                $(this).next().fadeToggle()
            })

代码演示

在1.9版本以下的jQuery中，相当于

            $("#btn").toggle(function(){
                $(this).next().fadeIn()
            },
            function(){
                $(this).next().fadeOut()
            })