jquery - effect - animate method
TRANSCRIPT
![Page 1: JQuery - Effect - Animate method](https://reader036.vdocument.in/reader036/viewer/2022082702/554a6302b4c905522f8b571f/html5/thumbnails/1.jpg)
Effect - Animation
.animate()
![Page 2: JQuery - Effect - Animate method](https://reader036.vdocument.in/reader036/viewer/2022082702/554a6302b4c905522f8b571f/html5/thumbnails/2.jpg)
การสร�างแอนิเมชั่��นิแบบก�าหนิดเอง เป็�นการสรางโดยระบุ�การควบุค�มแบุบุละเอี�ยด
กว�าที่��ผ่�านมา อีอีกแนว manual เอีง โดยใช้เมธอีด
.animate()
![Page 3: JQuery - Effect - Animate method](https://reader036.vdocument.in/reader036/viewer/2022082702/554a6302b4c905522f8b571f/html5/thumbnails/3.jpg)
การสร�างแอนิเมชั่��นิแบบก�าหนิดเอง แบุบุที่�� 1 (อีย�างมาก 4 Parameters:
Properties, speed, easing, function)
.animate({property1 : 'value1',propertyN : 'valueN'
}, speed, easing, function(){alert('Animation animated.');
});
![Page 4: JQuery - Effect - Animate method](https://reader036.vdocument.in/reader036/viewer/2022082702/554a6302b4c905522f8b571f/html5/thumbnails/4.jpg)
การสร�างแอนิเมชั่��นิแบบก�าหนิดเอง แบุบุที่�� 2 (2 Parameters: Properties,
Options).animate({property1: 'value1',propertyN: 'valueN'
}, {duration: 'value',easing: 'value',complete: function(){
alert('Animation animated.');},queue: boolean,step: callback
});
![Page 5: JQuery - Effect - Animate method](https://reader036.vdocument.in/reader036/viewer/2022082702/554a6302b4c905522f8b571f/html5/thumbnails/5.jpg)
การสลั�บแอนิเมชั่��นิจางโดยก�าหนิดเอง
เน �อีงจาก effect บุางอีย�างไม�สามารถ toggle ได (สล$บุระหว�างเป็&ดป็&ดเป็ล��ยนไป็เป็ล��ยนมา) เราสามารถใช้ เมธอีด .animate() มาช้�วยได
.animate({opacity:'toggle'}, 'slow');
![Page 6: JQuery - Effect - Animate method](https://reader036.vdocument.in/reader036/viewer/2022082702/554a6302b4c905522f8b571f/html5/thumbnails/6.jpg)
การสร�างแอนิเมชั่��นิโดยก�าหนิด Property หลัายตั�ว
เมธอีด .animate() สามารถถ'กแกไข property หลายตั$วพรอีมก$นได
.animate({opacity:'toggle', height:'toggle'
}, 'slow');
![Page 7: JQuery - Effect - Animate method](https://reader036.vdocument.in/reader036/viewer/2022082702/554a6302b4c905522f8b571f/html5/thumbnails/7.jpg)
การสร�างแอนิเมชั่��นิโดยก�าหนิด Property หลัายตั�ว
เราสามารถที่+าการเพ,�มหร อีลดขนาดขอีงตั$วอี$กษรเป็�นแอีน,เมช้$�น โดยใช้เมธอีด .animate() แที่นการใช้เมธอีด .css()
![Page 8: JQuery - Effect - Animate method](https://reader036.vdocument.in/reader036/viewer/2022082702/554a6302b4c905522f8b571f/html5/thumbnails/8.jpg)
การจ�ดตั�าแหนิ�งด�วย CSS
เม �อีเราใช้เมธอีด .animate() ก$บุ element บุนเว.บุเพจ ม�ขอีจ+าก$ดที่�� CSS ก+าหนดใหก$บุ element ที่��เราตัอีงการจะแกไขการจ$ดตั+าแหน�งขอีง element
สามารถป็ร$บุไดโดยเพ,�ม position: relative; เขาไป็ใน css ใหเป็�นความส$มพ$นธ/แบุบุส$มพ$ที่ธ/