web前端入门到实战： jQuery的淡入淡出
2019-09-25 本文已影响0人
560b7bb7b879
在jQuery中的一些特效中，可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()，下面为分别为大家介绍各个方式的使用。
jQuery fadeIn() 用于淡入已经被隐藏的元素，例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery淡入</title>
<style>
*{margin:0;padding:0;}
div{width:50px;height:50px;margin:10px;display:none;}
#div1{background: green;}
#div2{background: orange;}
#div3{background: yellow;}
</style>
<!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn(1000);
$("#div3").fadeIn("slow");
});
});
</script>
</head>
<body>
<p>实例演示了 fadeIn()不同参数的效果。</p>
<button>点击淡入 div 元素。</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
jQuery fadeOut() 用于淡入已经被隐藏的元素，例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery淡出</title>
<style>
*{margin:0;padding:0;}
div{width:50px;height:50px;margin:10px;}
#div1{background: green;}
#div2{background: orange;}
#div3{background: yellow;}
</style>
<!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut(1000);
$("#div3").fadeOut("slow");
});
});
</script>
</head>
<body>
<p>实例演示了 fadeIn()不同参数的效果。</p>
<button>点击淡出 div 元素。</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeToggle()切换</title>
<style>
*{margin:0;padding:0;}
div{width:50px;height:50px;margin:10px;}
#div1{background: green;}
#div2{background: orange;}
#div3{background: yellow;}
</style>
<!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle(1000);
$("#div3").fadeToggle("slow");
});
});
</script>
</head>
<body>
<p>实例演示了 fadeToggle() 不同参数的效果。</p>
<button>点击切换 div 元素。</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeTo透明度</title>
<style>
*{margin:0;padding:0;}
div{width:50px;height:50px;margin:10px;}
#div1{background: green;}
#div2{background: orange;}
#div3{background: yellow;}
</style>
<!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
</script>
</head>
<body>
<p>实例演示了 fadeTo不同参数的效果。</p>
<button>点击fadeTo透明度 div 元素。</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
自己是一个6年的前端工程师,希望本文对你有帮助！
这里推荐一下我的前端学习交流扣qun：731771211 ，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，每天分享技术
点击：加入
