Saat kita membuat pengaruh animasi beruntun/berkelanjutan memakai .animate(), biasanya kita akan melaksanakan ini:
$('div').animate({ width:100, height:30 }, 1000).animate({ marginTop:200, marginLeft:100 }, 1000).animate({ fontSize:30, padding:40 }, 1000).animate({ borderWidth:10 }, 1000).animate({ marginTop:0 }, 1000); // dan seterusnya...Implementasi di atas memang bekerja dan sama sekali tidak salah. Lihat risikonya di sini:
Tapi sadarkah Anda bahwa properti-properti animasi yang tertulis di dalam .animate() intinya hanyalah objek:
var anim = [ { width:100, height:30 }, { marginTop:200, marginLeft:100 }, { fontSize:30, padding:40 }, { borderWidth:10 }, { marginTop:0 } ];Ini memungkinkan kita untuk menerapkan properti-properti animasi tersebut satu per satu tanpa harus mendeklarasikan .animate() berulang kali:
var anim = [ { width:100, height:30 }, { marginTop:200, marginLeft:100 }, { fontSize:30, padding:40 }, { borderWidth:10 }, { marginTop:0 } ]; $.each(anim, function(i) { $('div').animate(anim[i], 1000); });Atau cukup gunakan cara usang yang biasa dipakai untuk menangani array ketika kita memakai JavaScript mentah menyerupai ini:
var anim = [ { width:100, height:30 }, { marginTop:200, marginLeft:100 }, { fontSize:30, padding:40 }, { borderWidth:10 }, { marginTop:0 } ]; for (var i = 0, len = anim.length; i < len; i++) { $('div').animate(anim[i], 1000); }Performa?
Saya tidak tahu apakah cara ini dapat mempercepat kerja animasi atau tidak (Saya malas mengetesnya). Tapi Saya pikir cara ini dapat mempermudah kita di dalam membangun deret animasi berlebih-lebihan tanpa harus mendeklarasikan jQuery .animate() secara berlebihan. Selain itu, dengan cara mempopulasikan properti animasi di dalam array, maka ini memungkinkan kita untuk membuat gerak animasi yang berbeda-beda pada elemen yang berbeda dengan cara meletakkan array animasi ke dalam atribut elemen. Misalnya menyerupai ini:
<div data-animation="[{top:30},{left:50},{fontSize:30,borderWidth:10},{padding:30}]"></div>Setelah itu, cukup gunakan method manipulasi atribut untuk mendapat nilai atribut pada masing-masing elemen. Konversi nilainya semoga menjadi array (bukan string) dengan eval():
$('div').each(function() { var anim = eval($(this).data('animation')), // Mengambil nilai atribut `data-animation` dari elemen $div = $(this); $.each(anim, function(i) { $div.animate(anim[i], 1000); }); });Referensi: SO - jQuery .animate() with Direction That Created from an Array of Objects, But
Sumber https://www.dte.web.id/