<html>
<head>
<script src="jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
<body>
<p style="font-size:18px;font-family:'微软雅黑';">演示带有不同参数的 fadeToggle() 方法。</p>
<button style="position:relative;left:390px;width:180px;height:35px;color:#fff;background-color:#ABADB1;font-family: '微软雅黑';border:solid thin;font-weight:bold">哈哈，点这里有惊喜噢！</button>
<br><br>
<div id="div1" style="width:150px;height:150px;background-color:#EB90FF;position:relative;left:400px;"></div>
<br>
<div id="div2" style="width:150px;height:150px;background-color:#605D5D;position:relative;left:400px;"></div>
<br>
<div id="div3" style="width:150px;height:150px;background-color:#90DBFF;position:relative;left:400px;"></div>
</body>
</body>
</html>
<head>
<script src="jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
<title>实现淡出淡入</title>
</head><body>
<p style="font-size:18px;font-family:'微软雅黑';">演示带有不同参数的 fadeToggle() 方法。</p>
<button style="position:relative;left:390px;width:180px;height:35px;color:#fff;background-color:#ABADB1;font-family: '微软雅黑';border:solid thin;font-weight:bold">哈哈，点这里有惊喜噢！</button>
<br><br>
<div id="div1" style="width:150px;height:150px;background-color:#EB90FF;position:relative;left:400px;"></div>
<br>
<div id="div2" style="width:150px;height:150px;background-color:#605D5D;position:relative;left:400px;"></div>
<br>
<div id="div3" style="width:150px;height:150px;background-color:#90DBFF;position:relative;left:400px;"></div>
</body>
</body>
</html>
202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
