.animate() - Effects , jQuery |
.animate() เป็นการใช้ Effects กับ .animate() สำหรับ animate() เป็นการกำหนดคุณสมบัติการเคลื่อนไหวของ element ต่าง ๆ
Syntax
.animate( properties, [duration,] [easing,] [complete] )
.animate( properties, options )
Example 1 ตัวอย่างการใช้งาน .animate()
Effectsanimate1.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/* Using multiple unit types within one animation. */
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
});
</script>
</head>
<body>
<button id="go">» Run</button>
<div id="block">Hello!</div>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ event กับ animate เพื่อควบคุมการทำงาน และการเคลื่อนไหว
Example 2 ตัวอย่างการใช้งาน .animate()
Effectsanimate2.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
div {
position:absolute;
background-color:#abc;
left:50px;
width:90px;
height:90px;
margin:5px;
}
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
});
</script>
</head>
<body>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ event กับ animate เพื่อควบคุมการทำงาน และการเคลื่อนไหว
Example 3 ตัวอย่างการใช้งาน .animate()
Effectsanimate3.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
div {
background-color:#bca;
width:200px;
height:1.1em;
text-align:center;
border:2px solid green;
margin:3px;
font-size:14px;
}
button {
font-size:14px;
}
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( "#go1" ).click(function(){
$( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
.animate({ fontSize: "24px" }, 1500 )
.animate({ borderRightWidth: "15px" }, 1500 );
});
$( "#go2" ).click(function(){
$( "#block2" ).animate({ width: "90%" }, 1000 )
.animate({ fontSize: "24px" }, 1000 )
.animate({ borderLeftWidth: "15px" }, 1000 );
});
$( "#go3" ).click(function(){
$( "#go1" ).add( "#go2" ).click();
});
$( "#go4" ).click(function(){
$( "div" ).css({ width: "", fontSize: "", borderWidth: "" });
});
});
</script>
</head>
<body>
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<button id="go3">» Animate Both</button>
<button id="go4">» Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ event กับ animate เพื่อควบคุมการทำงาน และการเคลื่อนไหว
Example 4 ตัวอย่างการใช้งาน .animate()
Effectsanimate4.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
div {
position: relative;
background-color: #abc;
width: 40px;
height: 40px;
float: left;
margin: 5px;
}
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( "#go" ).click(function(){
$( ".block:first" ).animate({
left: 100
}, {
duration: 1000,
step: function( now, fx ){
$( ".block:gt(0)" ).css( "left", now );
}
});
});
});
</script>
</head>
<body>
<p><button id="go">Run >></button></p>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ event กับ animate เพื่อควบคุมการทำงาน และการเคลื่อนไหว
ลิ้งค์ที่ควรศึกษา
Go to : jQuery Selectors : jQuery Selectors and Element
Go to : jQuery Effects : jQuery and Effects
เกี่ยวกับบทความ
ส่วนหนึ่งของบทความได้เรียบเรียงและแปลจากเว็บไซต์ jQuery.Com โค้ดตัวอย่างคำสั่งนี้อยู่ภายใต้สัญญาอนุญาตของ GFDL สามารถนำโค้ดและคำสั่งใช้งานได้ฟรี สงวนลิขสิทธิ์เฉพาะคำอธิบายภาษาไทย
|
 ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
| |
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
| |
Score Rating : |
 |
|
| |
Create/Update Date : |
2011-09-22 21:42:53 /
2017-03-19 14:05:48 |
| |
Download : |
No files |
|
|
Sponsored Links / Related |
|
|
|
|
|
|
Load balance : Server 04
