您的位置：首页 > Web前端 > JQuery

JQuery淡入淡出小Demo

2015-06-29 23:31 645 查看

在做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>

 

 

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航