您的当前位置:首页正文

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

来源:要发发知识网

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()
            })