JQ show和hide（隐藏显示）、fadeIn和fadeOut（淡入淡出）、slideDown和slideUp（隐藏显示）

一、show和hide（隐藏显示）

1、show:最终状态是 display:block;

hide:最终状态是 display:none;

2、语法：show（毫秒数，回调函数）

3、注意：

①当jq对象没有处于最终状态时，当动画执行完毕后，才会触发，回调函数；

②当jq对象处于最终状态时，立马执行，回调函数；

③如果当前的jq对象处于动画的最终状态则不会重复执行

 $('button:first').click(function () {box.show();});$('button:eq(1)').click(function () {box.hide();});$('button:eq(2)').click(function () {box.show(4000, function () {console.log('show 完毕！');$(this).css('background-color','red');});});$('button:last').click(function () {box.hide(4000, function () {console.log('hide 完毕！');});})

二、fadeIn和fadeOut（淡入淡出）

1、fadeIn:最终状态是 display:block;

fadeOut:最终状态是 display:none;

2、语法：

jq对象.fadeIn(参数1，参数2)；

jq对象.fadeOut(参数1，参数2)；

3、注意：

（1）参数可选可写可不写

（2）参数1 动画执行的毫秒数；参数2 动画执行完毕后触发的回调函数

（3）当jq对象处于当前动画的终点则回调函数立马触发

 var box = $('.box');$('button:first').click(function () {box.fadeIn();});$('button:eq(1)').click(function () {box.fadeOut();});$('button:eq(2)').click(function () {box.fadeIn(4000, function () {console.log('显示啦');});});$('button:eq(3)').click(function () {box.fadeOut(4000, function () {console.log('隐藏啦');});})

三、slideDown和slideUp（隐藏显示）

1、slideDown:最终状态是 display:block;

slideUp:最终状态是 display:none;

2、语法：

slideDown(参数1，参数2)

slideUp(参数1，参数2)

3、注意：

（1）参数1和参数2都是可选的，可有可无的；

（2）参数1 是毫秒数

（3）参数2 是回调函数

①当触发动画的jq对象没有处于最终状态则动画执行完毕后才会去执行回调函数

②当触发动画的jq对象，处于最终状态，则立即执行回调函数。

 var box = $('.box');$('button:first').click(function () {box.slideDown();});$('button:eq(1)').click(function () {box.slideUp();});$('button:eq(2)').click(function () {box.slideDown(1000, function () {console.log('显示成功');$(this).css('backgroundColor','red');});});$('button:last').click(function () {box.slideUp(1000, function () {console.log('隐藏成功');});});

JQ show和hide（隐藏显示）、fadeIn和fadeOut（淡入淡出）、slideDown和slideUp（隐藏显示）相关推荐

原生js实现fadein 和 fadeout淡入淡出效果
用法: $("button").click(function(){ $("p").fadeOut(); }); fadeOut() 方法逐渐改变被选元素的不透明 ...
jq样式操作和效果(显示隐藏,滑入滑出,淡入淡出)
jq样式操作和效果 1.样式 1.jq设置样式 $("div").css('属性','值'); 2.jq排他思想 //多选一.排他思想,当前元素设置样式,其与兄弟清除样式 $(th ...
jQuery之动画系列(show、hide、fadeIn、fadeOut、fadeToggle、fadeTo、slideDown、slideUp、slideToggle)
文章目录 show 和 hide fadeIn 和 fadeOut fadeToggle fadeTo slideDown 和 slideUp slideToggle show 和 hide < ...
fadeIn()与fadeOut()方法
show()和hide()方法与fadeIn()和fadeOut()方法相比较,相同之处是都是切换元素的显示状态,不同之处在于,前者的动画效果使用元素的width与height属性都发生了变化,而后者 ...
jq 解决动画淡入淡出，隐藏显示，多次操作BUG
2019独角兽企业重金招聘Python工程师标准>>> 一般我们有动态的比如一个 div 点击其他一个或者是鼠标移动到另一个 div时候, 淡入淡出动画,或者是其他动画 .显 ...
jq动画函数：show（）、hide（）、toggle（）、slideDown（）、slideUp（）、slideToggle（）、fadeIn ()、fadeOut ()、fadeToggle ()
jq动画分为:基本动画和综合动画: 基本动画的作用都是显示隐藏: 综合动画是将自定义的属性放进去设置: 基本动画分为: show().hide().toggle():相对于左上角显示隐藏: slide ...
jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果隐藏.显示.切换.滑动.淡入淡出.以及动画1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示toggle()方法:可以使用它来切换hide ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
【每天一个JQuery特效】淡入淡出显示或隐藏窗口（1）
为什么80%的码农都做不了架构师?>>> 我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记. 本特效主要采用fa ...
jQuery动画（显示隐藏，淡入淡出，滑动）
目录分类基本动画函数显示元素交替显示隐藏滑动效果向上收缩效果向下展开效果交替伸缩样式淡入淡出效果淡入效果淡出效果自定义不透明度 jQuery的动画函数分类基本动画函数:既有 ...

JQ show和hide（隐藏显示）、fadeIn和fadeOut（淡入淡出）、slideDown和slideUp（隐藏显示）

JQ show和hide（隐藏显示）、fadeIn和fadeOut（淡入淡出）、slideDown和slideUp（隐藏显示）相关推荐

最新文章

热门文章