jQuery ?? - ?????
animate() ???
jQuery animate() ???? ??? ?? ?????? ??? ? ?????.
??: ??
$(selector).animate({params},speed,callback);
?? params ????? ?????? ???? CSS ??? ?????.
???? ?? ????? ??? ?? ??? ?????. "??", "??" ?? ??? ?? ??? ? ????.
??? ?? ????? ?????? ??? ? ??? ??? ?????.
<!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>開始動(dòng)畫</button>
<p>向右移動(dòng)</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>??:
????? ?? HTML ??? ?? ??? ??? ??? ? ????.
??? ???? ?? ?? ?? ??? CSS ?? ??? ??, ?? ?? ??? ???? ?? ?? ???!
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>開始動(dòng)畫</button>
<p>逐漸變大</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html> animate() ???? ???? ?? CSS ??? ??? ? ????
?, ?? ? ???! ??? ???? ? ??? ??? ?? ????. animate()? ??? ? ?? ?? ??? ????? Camel ???? ???? ???. ?? ?? padding-left ?? paddingLeft? ???? ?? margin-right ?? marginRight? ???? ???. . ?? ?? 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>開始動(dòng)畫</button>
<br><br>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>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>開始動(dòng)畫</button>
<p>收起</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>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>開始動(dòng)畫</button>
<p></p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
