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

jQuery学习之淡出淡入

2015-09-12 23:11 721 查看

<!DOCTYPE html>
<!--淡出淡入：实质上就是jquery的动画效果的一种
主要的函数有：
fadeIn()淡入已隐藏的元素
fadeOut()淡出可见元素
fadeToggle()淡出淡入任意切换
fadeTo()许渐变为给定的不透明度（值介于 0 与 1 之间）
-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery淡出淡入</title>
<script src="../res/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$("#button1").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
$("#button2").click(function(){
$("#div7").fadeToggle();
$("#div8").fadeToggle("slow");
$("#div9").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p style="content: close-quote">演示带有不同参数的淡出淡入方法。</p>
<button id="button">点击这里fadeIn</button>
<br><br>
<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>
<button id="button1">点击这里fadeOut</button>
<br><br>
<!--<div id="div4" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div5" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div6" style="width:80px;height:80px;display:none;background-color:blue;"></div>-->
<button id="button2">点击这里fadeToggle</button>
<br><br>
<div id="div7" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div8" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div9" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航