JQ系统函数 - 动画

来源：互联网发布：照片歌曲制作软件编辑：程序博客网时间：2024/06/07 19:30

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQ动画</title>
<style type="text/css">
body{
height: 10000px;
}
div{
width: 200px;
height: 200px;
margin-top: 30px;
}
#A1{
background-color: red;
}
#B1{
background-color: blue;
display: none;
}
#C1{
background-color: greenyellow;
}
#A2,#B2,#C2{
width: 200px;
height: 200px;
float: left;
margin-left: 20px;
}
#A2{
background-color: orange;
}
#B2{
background-color: gray;
}
#C2{
background-color: blueviolet;
}
</style>
</head>
<body>
<input type="button" id="hidden" value="隐藏" />
<input type="button" id="show" value="显示" />
<input type="button" id="showOrHidden" value="显示/隐藏" />
<input type="button" id="fadeIn" value="淡入" />
<input type="button" id="fadeOut" value="淡出" />
<input type="button" id="fadeInOrOut" value="淡入/淡出" />
<input type="button" name="fadeTo" id="fadeTo" value="指定透明度" />
<input type="button" name="sideUp" id="sideUp" value="滑出" />
<input type="button" name="sideDown" id="sideDown" value="滑入" />
<input type="button" name="sideUpOrDown" id="sideUpOrDown" value="滑入/滑出" />

<div id="A1"></div>
<div id="B1"></div>
<div id="C1"></div>

<div id="A2"></div>
<div id="B2"></div>
<div id="C2"></div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">

$("#hidden").click(function () {

$("#A1").hide();

$("#B1").hide("slow",function () {
console.log("动画完成之后执行的动画");
});

$("#C1").hide(2000,function () {
console.log("动画完成之后执行的动画");
});
});

$("#show").click(function () {
$("#A1").show();
$("#B1").show("slow",function () {

});
$("#C1").show(2000,function () {

});
});

$("#showOrHidden").click(function () {
$("#A1").toggle();
$("#B1").toggle("slow",function () {

});
$("#C1").toggle(2000,function () {

});
});

$("#fadeIn").click(function () {
$("#A1").fadeIn();
$("#B1").fadeIn("slow",function () {

});
$("#C1").fadeIn(2000,function () {

});
});

$("#fadeOut").click(function () {
$("#A1").fadeOut();
$("#B1").fadeOut("slow",function () {

});
$("#C1").fadeOut(2000,function () {

});
});

$("#fadeInOrOut").click(function () {
$("#A1").fadeToggle();
$("#B1").fadeToggle("slow",function () {

});
$("#C1").fadeToggle(2000,function () {

});
});

$("#fadeTo").click(function () {
$("#A1").fadeTo("slow",0.4,function () {

});
$("#B1").fadeTo("slow",0.2,function () {

});
$("#C1").fadeTo(2000,0.3,function () {

});
});

$("#sideUp").click(function () {
$("#A2").slideUp();
$("#B2").slideUp("slow",function(){

});
$("#C2").slideUp(2000,function () {

});
});

$("#sideDown").click(function () {
$("#A2").slideDown();
$("#B2").slideDown("slow",function(){

});
$("#C2").slideDown(2000,function () {

});
});

$("#sideUpOrDown").click(function () {
$("#A2").slideToggle();
$("#B2").slideToggle("slow",function(){

});
$("#C2").slideToggle(2000,function () {

});
});
</script>
</html>

0 0