Cara Menggunakan Effect Sliding JQuery

Hallo sobat program, bertemu lagi dengan saya Rizal dan alhamdulilah masih diberikan kesempatan untuk menulis tutorial diwebsite dumetschool. Pada kesempatan ini saya akan memberikan tutorial sederhana yaitu tentang Cara Menggunakan Effect Sliding JQuery.

Effect sliding ini dalam bahasa Indonesia adalah efek geser dimana nantinya setiap element yang ingin kita berikan efek akan bergeser. Dan yang harus teman-teman ketahui didalam efek sliding ini mempunyai 3 method yaitu : slideDown(), slideUp(), dan slideToggle() dan untuk penulisan syntax nya seperti pada contoh dibawah ini :

Oke setelah teman-teman sudah mengetahui definisi serta contoh syntax dari effect sliding ini maka alangkah baiknya kita akan coba untuk Cara Menggunakan Effect Sliding JQuery. Langsung saja tanpa panjang lebar lagi, teman-teman buat file HTML nya lalu ketikan kode HTML seperti dibawah ini :

<div class="container">
	<div class="slideUp"></div>
	<div class="slideDown"></div>
	<div class="slideToggle"></div>
</div>
<center>
	<button id="slideup">Slide Up!</button>
	<button id="slidedown">Slide Down!</button>
	<button id="slidetoggle">Slide Toggle!</button>
</center>

</div>

<button id="slideup">Slide Up!</button>

<button id="slidedown">Slide Down!</button>

<button id="slidetoggle">Slide Toggle!</button>

</center>

Jika sudah, maka langkah selanjutnya tambahkan style CSS nya seperti pada contoh dibawah ini :

body{background: lightgrey}
.container{width: 400px; display: flex; margin:auto; background: grey}
.slideUp{width: 50%; height: 100px; background: red; margin-right: 20px;}
.slideDown{width: 50%; display: none; height: 100px; background: green;  margin-right: 20px;}
.slideToggle{width: 50%; height: 100px; background: blue;}
button{margin-top: 30px; padding: 20px; cursor: pointer}

body{background: lightgrey}

.container{width: 400px; display: flex; margin:auto; background: grey}

.slideUp{width: 50%; height: 100px; background: red; margin-right: 20px;}

.slideDown{width: 50%; display: none; height: 100px; background: green; margin-right: 20px;}

.slideToggle{width: 50%; height: 100px; background: blue;}

button{margin-top: 30px; padding: 20px; cursor: pointer}

Perhatikan kode diatas saya berikan display none untuk yang slideDown karena nantinya effect slide down dari yang menghilang menjadi terlihat dimulai dari atas bergeser ke bawah. Oke langkah terakhir teman-teman tambahkan kode JQuery serta Library JQuerynya seperti pada contoh dibawah ini :

<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#slideup").click(function() {
  $(".slideUp").slideUp("slow", function() {
  });
});

$("#slidedown").click(function() {
  $(".slideDown").slideDown("slow", function() {
  });
});

$("#slidetoggle").click(function() {
  $(".slideToggle").slideToggle("slow", function() {
  });
});
</script>

$("#slideup").click(function() {

$(".slideUp").slideUp("slow", function() {

});

$("#slidedown").click(function() {

$(".slideDown").slideDown("slow", function() {

});

$("#slidetoggle").click(function() {

$(".slideToggle").slideToggle("slow", function() {

});

</script>

Jika sudah, silahkan dijalankan saja dibrowser yang teman-teman gunakan dan hasilnya akan menjadi seperti pada contoh dibawah ini :

Untuk demo live > DISINI

Oke jadi seperti itulah pembahasan atau tutorial sederhana dari saya tentang Cara Menggunakan Effect Sliding JQuery. Semoga dapat sangat bermanfaat buat teman-teman dan silahkan di explore lagi lebih luar dan sampai bertemu dipembahasan selanjutnya.

Terimakasih

Facebook DUMET School

Categories