jQuery效果-----fadeIn()fadeOut()fadeToggle()fadeTo()

Posted 2021-02-08 pzw23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery效果-----fadeIn()fadeOut()fadeToggle()fadeTo()相关的知识，希望对你有一定的参考价值。

fadeIn()，fadeOut()，fadeToggle()，fadeTo()

fadeIn()-----淡入已经隐藏的元素（把隐藏的被选元素渐渐显示出来）。

语法：$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长,可以是："slow"、"fast" 或毫秒。

可选的 callback 参数是该fadeIn()完成后所执行的函数名称。

fadeOut()----淡出可见的元素（把可见的被选元素渐渐隐藏起来）。

语法：$(selector).fadeOut(speed,callback);

speed和callback同上。

fadeToggle()----可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

语法：$(selector).fadeToggle(speed,callback);

speed和callback同上。

fadeTo()-----允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法：$(selector).fadeTo(speed,opacity,callback);

speed是必需的，该参数规定效果的时长，可以是："slow"、"fast" 或毫秒。

opacity是必需的，该参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间），越小越透明，0是完全透明（看不见），1是不透明。

callback同上。

<html>
<head>
<script src="./jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){

$("button#d").mousedown(function(){
$("button#d").css("color","red");
$("p#a").fadeOut("fast");
$("p#b").fadeOut("slow");
$("p#c").fadeOut(2000);
});
$("button#d").mouseup(function(){
$("button#d").css("color","black");
});
$("button#e").mousedown(function(){
$("button#e").css("color","red");
$("p#a").fadeIn("fast");
$("p#b").fadeIn("slow");
$("p#c").fadeIn(2000);
});
$("button#e").mouseup(function(){
$("button#e").css("color","black");
});
$("button#f").mousedown(function(){
$("button#f").css("color","red");
$("p#a").fadeToggle("fast");
$("p#b").fadeToggle("slow");
$("p#c").fadeToggle(2000);
});
$("button#f").mouseup(function(){
$("button#f").css("color","black");
});
$("button#g").mousedown(function(){
$("button#g").css("color","red");
$("p#a").fadeTo("fast",0.8);
$("p#b").fadeTo("slow",0.5);
$("p#c").fadeTo(2000,0.2);
});
$("button#g").mouseup(function(){
$("button#g").css("color","black");
});
});
</script>
</head>
<body>
<div style="border:1px solid;border-color:red;width:150px;height:216px;">
<div style="border:1px solid;border-color:white;height:70px;">
<p id="a"style="font-size:20px;color:red;">这是第一段</p>
</div>
<div style="border:1px solid;border-color:white;height:70px;">
<p  id="b"style="font-size:20px;color:blue;">这是第二段</p>
</div>
<div style="border:1px solid;border-color:white;height:70px;">
<p  id="c"style="font-size:20px;color:green;">这是第三段</p>
</div>
</div>
<button  id="d">fadeOut</button><br/>
<button  id="e">fadeIn</button><br/>
<button  id="f">fadeToggle</button><br/>
<button  id="g">fadeTo</button><br/>
</body>
</html>

效果：

技术图片

fadeToggle()，Toggle()，slideToggle()，fadeTo()

fadeToggle()切换fadeOut()和fadeIn()这两种模式。当被选元素是隐藏的状态时，fadeToggle()触发时会淡入显示被选元素，此时和fadeIn()一样；当被选元素是显示状态时，fadeToggle()触发时会淡出隐藏被选元素，此时和fadeOut()一样。

Toggle()切换show()和hide()这两种模式。当被选元素是隐藏的状态时，Toggle()触发时会显示被选元素,此时和show()一样；当被选元素是显示状态时，Toggle()触发时会隐藏被选元素，此时和hide()一样。

slideToggle()切换slideDown()和slideUp()这两种模式。当被选元素是隐藏的状态时，slideToggle()触发时会滑动显示被选元素,此时和slideDown()一样；当被选元素是显示状态时，slideToggle()触发时会滑动隐藏被选元素，此时和slideUp一样。

fadeTo()要设置被选元素的不透明度（0~1），0的时候是完全透明即隐藏，1的时候是完全不透明即正常的显示状态，在0和1之间的话越大越不透明，越小越透明。

fadeToggle()、Toggle()和slideToggle()都是用来隐藏或者显示被选元素的，只不过隐藏或显示的效果过程不一样。fadeToggle()是通过淡入/淡出效果来显示/隐藏被选元素，Toggle()是直接隐藏或显示被选元素，slideToggle()是通过滑动效果来隐藏或者显示被选元素。fadeTo()可以通过不透明度来隐藏和显示被选元素。

以上是关于jQuery效果-----fadeIn()fadeOut()fadeToggle()fadeTo()的主要内容，如果未能解决你的问题，请参考以下文章