Effect - Animation

.animate()

การสร�างแอนิเมชั่��นิแบบก�าหนิดเอง เป็�นการสรางโดยระบุ�การควบุค�มแบุบุละเอี�ยด

กว�าที่��ผ่�านมา อีอีกแนว manual เอีง โดยใช้เมธอีด

.animate()

การสร�างแอนิเมชั่��นิแบบก�าหนิดเอง แบุบุที่�� 1 (อีย�างมาก 4 Parameters:

Properties, speed, easing, function)

.animate({property1 : 'value1',propertyN : 'valueN'

}, speed, easing, function(){alert('Animation animated.');

});

การสร�างแอนิเมชั่��นิแบบก�าหนิดเอง แบุบุที่�� 2 (2 Parameters: Properties,

Options).animate({property1: 'value1',propertyN: 'valueN'

}, {duration: 'value',easing: 'value',complete: function(){

alert('Animation animated.');},queue: boolean,step: callback

});

การสลั�บแอนิเมชั่��นิจางโดยก�าหนิดเอง

เน �อีงจาก effect บุางอีย�างไม�สามารถ toggle ได (สล$บุระหว�างเป็&ดป็&ดเป็ล��ยนไป็เป็ล��ยนมา) เราสามารถใช้ เมธอีด .animate() มาช้�วยได

.animate({opacity:'toggle'}, 'slow');

การสร�างแอนิเมชั่��นิโดยก�าหนิด Property หลัายตั�ว

เมธอีด .animate() สามารถถ'กแกไข property หลายตั$วพรอีมก$นได

.animate({opacity:'toggle', height:'toggle'

}, 'slow');

การสร�างแอนิเมชั่��นิโดยก�าหนิด Property หลัายตั�ว

เราสามารถที่+าการเพ,�มหร อีลดขนาดขอีงตั$วอี$กษรเป็�นแอีน,เมช้$�น โดยใช้เมธอีด .animate() แที่นการใช้เมธอีด .css()

การจ�ดตั�าแหนิ�งด�วย CSS

เม �อีเราใช้เมธอีด .animate() ก$บุ element บุนเว.บุเพจ ม�ขอีจ+าก$ดที่�� CSS ก+าหนดใหก$บุ element ที่��เราตัอีงการจะแกไขการจ$ดตั+าแหน�งขอีง element

สามารถป็ร$บุไดโดยเพ,�ม position: relative; เขาไป็ใน css ใหเป็�นความส$มพ$นธ/แบุบุส$มพ$ที่ธ/