fadeIn()
用于以淡入效果显示已隐藏的元素。
语法：$(selector).fadeIn(speed,fn)
fadeOut
通过不透明度的变化来实现所有匹配元素的淡出效果。
语法：$(selector).fadeOut(speed,fn)
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
fn可不写。
iframe标签
<iframe> 标签规定一个内联框架。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
例：淡入淡出百度网页
代码
<title>淡入淡出百度网页</title>
<script type="text/jscript" src="../jquery-3.4.1.js"></script>
<script type="text/jscript">
//淡入效果
$(document).ready(function(e){
$("#danru").click(function(){
$("#baidu").fadeOut('fast');
});
//淡出效果
$("#danchu").click(function(){
$("#baidu").fadeIn('fast');
});
});
</script>
</head>
<body>
<p style="text-align: center">
<input type="button" value="淡入百度窗口" id="danru"/>
<input type="button" value="淡出百度窗口" id="danchu"/>
</p>
<p style="text-align: center">
<iframe src="https://www.baidu.com" width="500" height="300" id="baidu"></iframe>
</p>
</body>
自动确定是否淡入淡出地显示或隐藏元素
fadeToggle
用于在fadeIn()与fadeOut()这两个方法之间进行切换。
如果元素已经淡出，则执行fadeToggle()方法将向元素添加淡入效果；
如果元素已经淡入，则执行fadeToggle()方法将会向元素添加淡出效果。
语法:$(selector).fadeToggle(speed,fn);
例：
image.png
代码
<title>三个矩形</title>
<script type="text/jscript" src="../jquery-3.4.1.js"></script>
<script type="text/jscript">
$(document).ready(function(e){
//文字变化
$("#bt").click(function(){
if ($("#bt").html() == '淡入三个矩形') {
$("#bt").html("淡出三个矩形");
}
else {
$("#bt").html("淡入三个矩形");
}
//三个矩形淡入淡出
$("#1").fadeToggle();
$("#2").fadeToggle();
$("#3").fadeToggle();
});
});
</script>
</head>
<body>
<p>
<input type="button" value="淡入三个矩形" id="bt"/>
</p>
<div id="1" style="width: 400px;height: 60px;background-color: red;"></div>
<br/>
<div id="2" style="width: 400px;height: 60px;background-color: green;"></div>
<br/>
<div id="3" style="width: 400px;height: 60px;background-color: blue;"></div>
</body>
以卷帘效果展开或收缩被选择的元素
slideUp()
以卷帘式的滑动效果隐藏被选元素。
语法：$(selector).slideUp(speed,fn)
slideDown()
用于使用卷帘式的滑动效果显示已经隐藏的被选元素。
语法:$(selector).slideDown(speed,fn)
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
fn可不写。
例：
image.png
代码：
<title>收缩和展开</title>
<script type="text/jscript" src="../jquery-3.4.1.js"></script>
<script type="text/jscript">
$(document).ready(function(e){
$("#ss").click(function(){
$("#1").slideUp();
});
$("#zk").click(function(){
$("#1").slideDown();
});
});
</script>
</head>
<body>
<p>
<input type="button" value="展开内容" id="zk" />
<input type="button" value="收缩内容" id="ss" />
</p>
<div id="1">
• 5旬大妈出轨80后小伙 结果狗血 <br/>
• 官方痛批：当代汉奸民族败类！ <br/>
• 女生因泳衣“暴露”被取消冠军 <br/>
• 90后在公司突然大哭 原因心疼 <br/>
• 女儿回家发现母亲全裸陈尸沙发 <br/>
</div>
</body>
根据状态确定是否滑入或滑出被选元素
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
slideToggle
语法:$(selector).slideToggle(speed,fn)
滑入状态时变滑出状态
滑出状态时变滑入状态
网友评论