cara membuat efek slide dengan jquery animate

, ,

Gambar 0.1 Jquery logo
Jquery emang hebat, kalo kita tau cara menerapkannya,
kali ini saya share efek slide buat pembelajaran saja, kalo mau dijadiin menu mungkin harus di tambah efeknya,
selanjutnya pasti saya akan share2 menu2 yang keren , kita tunggu saja, kalo mau sharing2 pengetahuan boleh lewat
email / dikomentar. senang bisa kenal sama orang yang sama hobinya nyekrip wkwk, oke berikut scriptnya:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>cara membuat efek slide dengan jquery animate</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
div {
position: absolute;
background-color: #abc;
width: 100%;
height: 200px;
margin: 20px 0;
}
button{
margin:1em;
padding:8px 12px}
</style>
</head>
<body>
<center>
<button id="left">« Kiri</button>
<button id="right">Kanan »</button>
<div class="block"></div>
</center>
<script>
$( "#right" ).click(function() {
$( ".block" ).animate({ "left": "+=20%" }, "slow" );
});
$( "#left" ).click(function(){
$( ".block" ).animate({ "left": "-=20%" }, "slow" );
});
</script>
</body>
</html>

Preview



Penjelasan

#left id dari button yang akan menjalankan selector .block Kekiri.
+=20% Jarak yang akan diambil ketika di klik misal 100% berarti akan slide seluruhnya, dan bisa di
ganti dengan , px , rem , em . misal "left": "-=30px"
"slow" bisa diganti "fast" atau mungkin dengan nominal waktu , misal "800" dan sebagainya.
oke saya anggap mudeng lahya, kalo ga mudeng cari referensi lain lagi yang mungkin lebih simple, tapi menurut saya
ini suah sangat simple sekali dan mudah dipahami.
ckup sekian saja , lain kali saya share yang lebih keren. trimakasih.

Tidak ada komentar:

Posting Komentar

Maaf, fitur koment hanya untuk pengguna akun goggle saja.
Dikarenakan untuk meminimalisir komentar spam.