jquery動畫.gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
background: #E9FFB7;
}
.divItem {
width: 400px;
height: 400px;
background: pink;
position: absolute;
/*margin: 100px auto 0;*/
}
.disc {
font-size: 12px;
color: red;
}
.active {
color: #ff6700;
}
.passed {
color: #C6C6C6;
}
.current {
background: #ff6700;
}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function() {
// 控制顏色函數(shù)
function showColor(id) {
if (id !== "") {
$("#" + id).addClass("active").prev().removeClass().addClass("passed");
} else {
$("#msg").children(".active").removeClass().addClass("passed");
}
}
function showCurSpan(id) {
$("#" + id).addClass("current").siblings().removeClass("current");
}
// 執(zhí)行動畫時長
var speed = 4000;
$("input").click(function() {
// false，false
//$("div").stop(false);
// true, false
//$("div").stop(true);
$("#hide").addClass("active");
$("div").hide(speed, function() {
showColor("show");
})
.show(speed, function() {
showColor("fadeout");
})
.fadeOut(speed, function() {
showColor("fadein");
})
.fadeIn(speed, function() {
showColor("slideup");
})
.slideUp(speed, function() {
showColor("slidedown");
})
.slideDown(speed, function() {
showColor("fadeto");
})
.fadeTo(speed, .4, function() {
showColor("animate");
$("div").css("background", "green");
})
.animate({
left: 400
}, speed)
.animate({
height: 100
}, speed)
.animate({
width: 100
}, speed)
.animate({
height: 400
}, speed)
.animate({
width: 400
}, speed)
.animate({
left: 8
}, speed, function() {
showColor("");
$("div").css("background", "pink").fadeTo(0, 1);
$("#msg").children().removeClass();
});
});
var $divItem = $(".divItem");
var eventObj = {
"hide": function() {
$divItem.hide(speed);
},
"show": function() {
$divItem.show(speed);
},
"fadeout": function() {
$divItem.fadeOut(speed);
},
"fadein": function() {
$divItem.fadeIn(speed);
},
"slideup": function() {
$divItem.slideUp(speed);
},
"slidedown": function() {
$divItem.slideDown(speed);
},
"fadeto": function() {
$divItem.fadeTo(speed, .4, function() {
$("div").css("background", "green");
});
},
"animate": function() {
$divItem.animate({
left: 400
}, speed)
.animate({
height: 100
}, speed)
.animate({
width: 100
}, speed)
.animate({
height: 400
}, speed)
.animate({
width: 400
}, speed)
.animate({
left: 8
}, speed, function() {
$("div").css("background", "pink").fadeTo(0, 1);
});
}
};
// 動畫效果 span 綁定事件
$("span").click(function() {
$divItem.stop(true, true);
// 獲取當前span的id屬性
var id = this.id;
// 設(shè)置當前被選中
showCurSpan(id);
// 事件處理
eventObj[id]();
});
});
</script>
</head>
<body>
<input type="button" value="開始動畫" />
<span class="disc">說明：橙色表示當前正在執(zhí)行的動畫，灰色表示已經(jīng)執(zhí)行完的動畫，黑色表示還沒有執(zhí)行的動畫</span>
<p id="msg">
當前展示的是：
<span id="hide">隱藏動畫效果</span>
<span id="show">展示動畫效果</span>
<span id="fadeout">淡出動畫效果</span>
<span id="fadein">淡入動畫效果</span>
<span id="slideup">滑出動畫效果</span>
<span id="slidedown">滑入動畫效果</span>
<span id="fadeto">改變不透明度動畫效果</span>
<span id="animate">自定義動畫效果</span>
</p>
<div class="divItem"></div>
</body>
</html>
