jQuery manipulasi posisi (membuat animasi)

Selamat datang kawan kawan di blog saya yang sederhana ini . Sebelumnya saya mau tanya bagaimana kabarnya kawan mudah mudahan sehat , amin . 

Oke kali ini kita akan bahas mengenai javascript . Kita sekarang akan membuat bagaimana cara memanipulasi posisi dengan menggunakan libary javascript yaitu jQuery . Gimana sih caranya ? jadi pada jQuery untuk memanipulasi posisi ada dua fungsi yaitu offset() dan juga position() .Oke yang pertama akan kita coba gunakan adalah yang fungsi offset() dulu saja .

Untuk menggunakan fungsi offset() ini , cara umum penulisannya adalah

offset(koordinat);
offset({top:value,left:value});

Jadi ada dua parameter yang pertama atasnya atau top dan yang kedua adalah pinggirannya atau left .Sekarang kawan kawan sudah tau dan mari kita lanjut ke contohnya .

<style>
#div1{
background-color: yellow;
width:100px;
height: 100px;
position:relative;
left:100;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function(){
$("#klik").click(function(){
$("#div1").offset({top:300,left:300});
});
});
</script>
<div id="div1">Test</div><input id="klik"value="pindah"type="button">

Begitu kita mengklik pindah maka tag yang mempunyai id div1 akan berpindah ke top 300 dan left 300 . Oke sekarang kita akan coba menggunakan fungsi position() , fungsi ini akan menghasilkan objek yang mempunyai 2 properti yaitu top dan left .

<style>
#div1{
background-color: yellow;
width:100px;
height: 100px;
position:relative;
left:100;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function(){
$("#klik").click(function(){
var ordinat=$("#div1").offset({top:300,left:300}).position();
alert(ordinat.top+"  "+ordinat.left);
});
});
</script>
<div id="div1">Test</div><input id="klik"value="pindah"type="button">

sebelumnya ini masih contoh yang tadi cuma di tambah fungsi position(); dan saya kasih varible . Begitu kita klik pindah maka akan berpindah dan akan meng alert 300  300 . Gimana mudah bukan ? kita hanya perlu menggunakan fungsinya saja . Oke sekarang kita akan buat lagi dari awal , kita akan coba membuat begitu kita menekan panah kiri , kanan , atas , atau bawah di keyboard maka akan berpindah .Berarti kita akan menggunakan fungsi onkeydown atau onkeyup , buat yang belum tau baca dulu sini , sekarang kita gunakan fungsi onkeydown saja .

<style>
#div1{
width:100px;
height: 100px;
position:absolute;
left:100;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function(){
posisi=new Object();
var kiri=100;
var atas=0;
function x(){
posisi.left=kiri;
posisi.top=atas;
$("#div1").offset(posisi);
}
var tekan=document.onkeydown=function(p){
if(p.keyCode==39){
if(kiri>=1000){
kiri=1000;
}else{
kiri=kiri+30;}
x();
}
if(p.keyCode==37){
if(kiri<=0){
kiri=0;
}else{
kiri=kiri-30;}
x();
}
if(p.keyCode==40){
if(atas>=1000){
atas=1000;
}else{
atas=atas+30;}
x();
}
if(p.keyCode==38){
if(atas<=0){
atas=0;
}else{
atas=atas-30;}
x();
}
};
});
</script>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhThWT7ihyphenhyphenBop8CXXUSFWcD4G5F3lL7AEkIV0qGZagM4B5-EODRxlLf3vjZRJjAqB1rSJ8XQmi5LLpCe7yOFozmv1dckovOLmF4hUO2_ZDMGW6WS54SNECiCxaSQcx1TpVOqUOrgoJVbD0/s1600/Goblin.png" id="div1"/>

Bro kalo yang 37,38,39,40 , apa ya ? itu namanya kode ascii lebih lengkapnya baca disini .

Scriptnya panjang tetapi sebenarnya itu sederhana jadi kawan kawan gak usah binggung , karena misal kalo kita menekan panah kiri di keyboard maka akan melakukan aritmatika kiri=kiri+30 dan jika kiri lebih besar atau sama dengan 1000 maka kiri tetap 1000 . kalo menekan panah atas di keyboard maka akan melakukan artimatika atas=atas-30 dan jika atas lebih kecil atau sama dengan 0 maka atas tetap 0 .

Oke itu dia belajar manipulasi posisi dengan menggunakan jQuery . Semoga menambah ilmu dan juga tentunya bermanfaat . Terimakasih telah berkenan membaca artikel ini . Sampai jumpa di artikel yang lainnya yang lebih menarik dan juga lebih bermanfaat .

Pesan saya , teruslah lakukan experimen experimen , misal kalo saya kasih source code ini coba kalian buat versi kalian sendiri mungkin scriptnya lebih sederhana .