现在的位置: 网页制作教程网站制作教程 >正文
JS特效教程

jQuery滑动显示和隐藏效果-slideDown()、slideUp()、slideToggle()方法

发表于2018/7/24 网站制作教程 0条评论 ⁄ 热度 4,664℃

网页元素的滑动效果,可通过jquery的slideDown()、slideUp()、slideToggle()三个方法来实现。

slideDown()代表有不可见滑动到可见状态,隐藏到显示。

slideUp()代表有可见状态滑动到不可见状态,显示到隐藏。

slideToggle()代表是可见状态和不可见状态之间的切换,如果当前是显示状态,则切换到隐藏状态,反之亦然。

语法:

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

参数1:speed速度,显示的时间,单位:毫秒。固定字符串:(“slow”,”normal”, or “fast”)

参数2:callback 回调函数。动画效果完成之后回调函数。

slideDown()、slideUp()、slideToggle()示例:

$("#id").click(function(){
  $("p").slideDown(1000);
});

$("#id").click(function(){
  $("p").slideUp(1000);
});
$("#id").click(function(){
  $("p").slideToggle(1000);
});
  • 暂无评论