Metode jQuery animate() <\/em><\/strong>digunakan untuk membuat custom animasi. Metode animate() biasanya digunakan untuk menganimasi properti CSS numerik, misalnya, width, height, margin, padding, opacity, top, left, dll. Tetapi properti non-numerik seperti color atau background-color tidak dapat dianimasikan menggunakan fungsionalitas jQuery dasar.<\/p>\n\n\n\n Catatan:<\/em><\/strong> Tidak semua properti CSS dapat dianimasikan. Secara umum, properti CSS apa pun yang menerima nilai yang berupa number, length, percentage, ataupun color adalah animatable. Namun, animasi warna tidak didukung oleh inti jQuery library. Untuk memanipulasi dan menghidupkan warna gunakan plugin warna jQuery.<\/p>\n\n\n\n Sintaks dasar metode jQuery animate()<\/em><\/strong> dapat diberikan dengan:<\/p>\n\n\n Parameter dari metode animate() <\/em><\/strong>memiliki arti sebagai berikut:<\/p>\n\n\n\n Berikut adalah contoh sederhana dari metode jQuery animate() yang menggerakkan gambar dari posisi aslinya ke kanan sebanyak 300 piksel saat mengklik tombol.<\/p>\n\n\n Catatan:<\/em><\/strong> Semua elemen HTML memiliki posisi statis secara default. Karena elemen statis tidak dapat dipindahkan, maka kalian harus mengatur properti posisi CSS untuk elemen menjadi relative, fixed,<\/em><\/strong> atau absolute<\/em><\/strong> untuk memanipulasi atau menganimasi posisinya.<\/p>\n\n\n\n Kalian juga bisa menganimasikan beberapa properti elemen sekaligus secara bersamaan menggunakan metode animate()<\/em><\/strong>. Semua properti dianimasikan secara simultan tanpa penundaan.<\/p>\n\n\n Kiat:<\/em><\/strong> Kalian harus mengatur properti border-style untuk elemen sebelum menganimasikan properti border-with. Elemen harus memiliki batas sebelum kalian dapat menganimasikan border width, karena nilai default properti border-style tidak ada.<\/p>\n\n\n\n Kalian juga dapat menganimasi beberapa properti elemen satu per satu secara individual dalam queue menggunakan fitur chaining jQuery. Kita akan belajar lebih banyak tentang chaining di bab selanjutnya.<\/p>\n\n\n\n Contoh berikut menunjukkan jQuery queued atau chaining, di mana setiap animasi akan dimulai setelah animasi sebelumnya pada elemen selesai.<\/p>\n\n\n Kalian juga dapat menentukan nilai relatif untuk properti animasi. Jika nilai ditentukan dengan awalan prefix +=<\/em><\/strong> atau -=<\/em><\/strong> , maka nilai target dihitung dengan menambahkan atau mengurangi angka yang diberikan dari nilai properti saat ini.<\/p>\n\n\n Selain nilai numerik, setiap properti dapat mengambil string \u2018show\u2019, \u2018hide\u2019, <\/em><\/strong>dan \u2018toggle\u2019<\/em><\/strong>. Ini akan sangat membantu dalam situasi ketika kalian hanya ingin menghidupkan properti dari nilai saat ini ke nilai awal dan sebaliknya.<\/p>\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" Metode Animasi Metode jQuery animate() digunakan untuk membuat custom animasi. Metode animate() biasanya digunakan untuk menganimasi properti CSS numerik, misalnya, width, height, margin, padding, opacity, top, left,<\/p>\n","protected":false},"author":1,"featured_media":11743,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[4401,4404,4402,4403,4399,4400],"class_list":["post-11765","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-belajar-web-design","tag-belajar-jquery-efek-animasi","tag-belajar-jquery-efek-animasi-pemula","tag-kursus-jquery-efek-animasi-bandung","tag-kursus-jquery-efek-animasi-jakarta","tag-tutorial-jquery-efek-animasi","tag-tutorial-jquery-efek-animasi-pemula"],"yoast_head":"\nSyntax<\/h5>\n\n\n\n
\n$(selector).animate({ properties }, duration, callback);\n<\/pre><\/div>\n\n\n\n<script type="text\/javascript">\n$(document).ready(function(){\n $("button").click(function(){\n $("img").animate({\n left: 300\n });\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\nMenganimasikan Beberapa Properti Sekaligus<\/h5>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n $("button").click(function(){\n $(".box").animate({\n width: "300px",\n height: "300px",\n marginLeft: "150px",\n borderWidth: "10px",\n opacity: 0.5\n });\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\nAnimate Multiple Properties Satu per Satu atau Queued Animasi<\/h5>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n $("button").click(function(){\n $(".box")\n .animate({width: "300px"})\n .animate({height: "300px"})\n .animate({marginLeft: "150px"})\n .animate({borderWidth: "10px"})\n .animate({opacity: 0.5});\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\nProperti Animate dengan Nilai Relatif<\/h5>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n $("button").click(function(){\n $(".box").animate({ \n top: "+=50px",\n left: "+=50px",\n width: "+=50px",\n height: "+=50px"\n });\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\nProperti Animate dengan Nilai yang Telah Ditentukan Sebelumnya<\/h5>\n\n\n\n
\n<script type="text\/javascript">\n$(document).ready(function(){\n $("button").click(function(){\n $(".box").animate({\n width: 'toggle'\n });\n });\n});\n<\/script>\n<\/pre><\/div>\n\n\n