slideDown()和slideUp()方法

·slideDownO:滑动显示(方向不一定)

·slideUp():滑动隐藏

·slideToggle():滑动切换

·让元素在display属性的block和none之间进行切换。

参数

·如果不传参数:默认的过渡时间为400毫秒。

·如果传递参数:

·单词格式:”slow”,”normal”,”fast”

·数字格式的时间,单位是毫秒,在规定时间之内会出现显示或隐藏的动画。

注意

·如果滑动的元素没有设置宽高,没有滑动效果

·如果元素设置了高度和宽度,会进行上下垂直方向的滑动。

·动画的效果:高度属性在0到设置值之间的变化,没有透明度动画。

·如果元素设置了定位,偏移量方向如果是bottom参与了,滑动方向会发生变化。

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>Document</title> <style> img { position: fixed; bottom: 10px; display: block; width: 320px; height: 480px; } </style> </head> <body> <input type=“button” value=“滑动隐藏” id=“btn1”> <input type=“button” value=“滑动显示” id=“btn2”> <input type=“button” value=“滑动切换” id=“btn3”><br> <img src=“images/cat.jpg” id=“pic”> <script src=“js/jquery-1.12.4.min.js”></script> <script> // 获取元素 var $pic = $(“#pic”) var $btn1 = $(“#btn1”) var $btn2 = $(“#btn2”) var $btn3 = $(“#btn3”) // 添加点击事件,让图片实现滑动显示和隐藏 $btn1.click(function () { $pic.slideUp(1000) }) $btn2.click(function () { $pic.slideDown(1000) }) $btn3.click(function () { $pic.slideToggle(1000) }) </script> </body> </html>