JQuery淡入淡出小Demo
在做WEB前端设计的过程中图片的效果处理必不可少，下面我们看一个例子。
大家在使用demo的时候，要记得引入JQuery文件，在相应的文件路劲下添加俩张图片，图片大一点效果更佳。jQuery fadeTo()可以设定一个透明度的值，一直淡出到这个值。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jsFile/test.js"></script>
<script type="text/javascript" src="jsFile/jquery-2.1.3.js"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function () {
$("#img1").fadeIn(3000);
$("#img2").fadeOut(3000);
});
$("#btn2").click(function(){
$("#img1").fadeToggle(3000);
$("#img2").fadeToggle(3000);
})
})
</script>
</head>
<body>
<button id="btn1">点击按钮实现图片1淡入，图片2的淡出</button>
<button id="btn2">点击实现淡入、淡出</button>
<div id="box">
<img id="img1" src="img/0aab2398-fb92-425a-9702-da22b31656da.jpg" style="display: none">
<img id="img2" src="img/218065a2-a803-4c69-9f22-e691dae44566.jpg">
</div>
</body>
</html> 相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17