JQury中设置元素淡入淡出(fadeIn/fadeOut/fadeToggle/fadeTo)以及显示隐藏(show/hide)方法

编程基础 • 2025-01-01 19:17 • 阅读 24

JQuery中的四个Fading方法可以设置素的淡入淡出，分别如下：
fadeIn()用于淡入已经隐藏的素语法为：
fadeIn(speed,callback);
其中 speed 与callback都是可选的参数，前者规定效果的时长，它可以取以下值：slow、fast 或具体毫秒数，后者是当前动画全部完成后所执行的函数。

同理fadeOut()用于淡出可见素；

fadeToggle()用于切换淡入淡出的素；

而fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间），语法：

fadeTo(speed,opacity,callback);
其中只有callback才是可选参数，opacity参数是设置为淡入淡出所给定的不透明度（值介于 0 与 1 之间）。
如下例：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("#div1").fadeIn("fast").fadeTo("fast",0.1);
$("#div2").fadeIn("slow");
$("#div3").fadeIn(1000);
$("#div4").fadeIn();
});
});

$(document).ready(function(){
$("#button2").click(function(){
$("#div1").fadeOut("fast");
$("#div2").fadeOut("slow");
$("#div3").fadeOut(1000);
$("#div4").fadeOut();
});
});

$(document).ready(function(){
$("#button3").click(function(){
$("#div1").fadeToggle("fast");
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(1000);
$("#div4").fadeToggle();
});
});

$(document).ready(function(){
$("#button4").click(function(){
$("#div1").fadeTo("fast",0.3);
$("#div2").fadeTo("slow",0.7);
$("#div3").fadeTo(1000,1,alert("设置透明度成功！"));
});
});

</script>
</head>
<body>
<button id="button1">淡入四个矩形</button>
<button id="button2">淡出四个矩形</button>
<button id="button3">切换淡入淡出</button>
<button id="button4">设置其透明度</button>
<div id="div1" style="width:80px;height:80px; display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px; display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px; display:none;background-color:blue;"></div>
<br>
<div id="div4" style="width:80px;height:80px; display:none;background-color:black;"></div>
</body>
</html>

JQurey还给我们提供了设置素隐藏于显示的方法：显示show(speed,callback)、隐藏hide(speed,callback)、切换toggle(speed,callback)，用法与fade一样。

今天的文章 JQury中设置素淡入淡出(fadeIn/fadeOut/fadeToggle/fadeTo)以及显示隐藏(show/hide)方法分享到此就结束了，感谢您的阅读。

JQury中设置元素淡入淡出(fadeIn/fadeOut/fadeToggle/fadeTo)以及显示隐藏(show/hide)方法

相关推荐