jQuery随笔-- 淡入淡出

来源：互联网发布：英雄杀for mac 编辑：程序博客网时间：2024/05/06 14:14

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
   //三个矩形淡入
$("#but1").click(function(){
    $("#div1").fadeIn(1000);
    $("#div2").fadeIn(2000);
    $("#div3").fadeIn(3000);
});
//三个矩形淡出
$("#but2").click(function(){
    $("#div1").fadeOut(1000);
    $("#div2").fadeOut(2000);
    $("#div3").fadeOut(3000);
});
//三个矩形淡入淡出
$("#but3").click(function(){
    $("#div1").fadeToggle(1000);
    $("#div2").fadeToggle(2000);
    $("#div3").fadeToggle(3000);
});
//三个矩形淡出不透明度（值介于 0 与 1 之间）。
$("#but4").click(function(){
    $("#div1").fadeTo("slow",0.3);
    $("#div2").fadeTo("slow",0.6);
    $("#div3").fadeTo("slow",0.9);
});
});
</script>
</head>
<body>
<button id="but1">三个矩形淡入</button><br>
<button id="but2">三个矩形淡出</button><br>
<button id="but3">三个矩形淡入淡出</button><br>
<button id="but4">三个矩形淡出</button><br>
<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>
</body>
</html>