jQuery笔记——动画设计——滑动动画

一、显隐滑动效果

向下滑动：slideDown

slideDown([duration] , [callback])

slideDown([duration] , [easing] , [callback])

向上滑动：slideUp

slideUp([duration] , [callback])

slideUp([duration] , [easing] , [callback])

参数解释：

duration：一个字符串或数字，用来定义动画将运行多久

easing：一个用来表示使用哪个缓冲函数来过渡的字符串

callback：动画完成时执行的函数

slideDown和slideUp：

通过改变高度的值来实现；高度为0时，display将会被设为none，以确保该元素不会影响页面布局。

持续时间以毫秒为单位，数值越大，动画越慢；fast ：200ms  ，slow：600；如果提供任何其他字符串，或者这个duration参数被忽略，默认使用400ms。

这个回调函数不设置任何参数，但是this是存在动画的DOM元素，如果多个元素一起做动画效果，每执行一次回调匹配的元素，而不是作为一个整体动画的一次。

    
    
    
    



    隐藏文本框1
    


    隐藏文本框2
    


    隐藏文本框3
    

注意：slideDown（）作用于隐藏元素

            slideUp（）作用于显示元素

二、显隐切换滑动

在滑动中切换显示或隐藏元素：slideToggle()

slideToggle([duration] , [callback])

slideToggle([duration] , [easing] , [callback])

参数解释：

duration：一个字符串或数字，用来定义动画将运行多久

easing：一个用来表示使用哪个缓冲函数来过渡的字符串

callback：动画完成时执行的函数

slideToggle：

通过改变高度的值来实现；高度为0时，display将会被设为none，以确保该元素不会影响页面布局。display属性将会被存储并且需要的时候可以恢复。

持续时间以毫秒为单位，数值越大，动画越慢；fast ：200ms  ，slow：600；

这个回调函数不设置任何参数，但是this是存在动画的DOM元素，如果多个元素一起做动画效果，每执行一次回调匹配的元素，而不是作为一个整体动画的一次。

    
    
    
    
    














    滑动切换
    共计滑动切换0个div元素。