jQuery ?????
jQuery ????? - animate() ???
jQuery animate() ???? ??? ?? ?????? ??? ? ?????.
??: ??
$(selector).animate({params},speed,callback);
?? params ????? ?????? ???? CSS ??? ?????.
???? ?? ????? ??? ?? ??? ?????. "??", "??" ?? ??? ?? ??? ? ????.
??? ?? ????? ?????? ??? ? ??? ??? ?????.
?? ????? animate() ???? ??? ??? ?????. <div> ??? ????? 250?? ?????.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>開(kāi)始動(dòng)畫(huà)</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>????? ???? ??? ???.
?: ????? ?? HTML ??? ?? ??? ??? ??? ? ????. . ???? ?? ?? ??? ?? ??? ??, ?? ?? ??? ???? ???!
jQuery animate() - ?? ?? ??
???? ??? ? ????. ????? ?? ???? ?? ??? ?? ??:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>開(kāi)始動(dòng)畫(huà)</button>
<div style="background:#4ae936;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>????? ???? ??? ???
jQuery animate() - ?? ? ??
?? ?? ??? ?? ????. ??? ?? ?? ???? ?). ? ?? += ?? -=? ???? ???.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
</head>
<body>
<button>開(kāi)始動(dòng)畫(huà)</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>????? ???? ??? ???
jQuery animate() - ?? ??? ? ??
"??", "???" ?? "??" ??:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head>
<body>
<button>開(kāi)始動(dòng)畫(huà)</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>????? ???? ??? ???
jQuery animate() - ??? ?? ??
????? jQuery? ?????? ?? ??? ??? ?????.
?, ?? ?? animate() ??? ??? ???? jQuery? ?? ??? ??? ???? "??" ???? ????? ?????. ?? ?? ??? ????? ??? ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>
</head>
<body>
<button>開(kāi)始動(dòng)畫(huà)</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>????? ???? ??? ???
?? ???? <div> ??? ????? 100?? ??? ?? ???? ?? ??? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>開(kāi)始動(dòng)畫(huà)</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>????? ???? ??? ???
