Menggunakan Fungsi stop() Pada Jquery dan cara penggunaannya

Halo teman-teman, berjumpa lagi dengan saya pada tutorial dumet school. Di artikel kali ini kita akan Menggunakan Fungsi stop() Pada Jquery, dan di latihan yang akan kita praktekkan adalah membuat sebuah fungsi dan salah satu fungsi ini kita berikan fungsi stop(). Kali ini kita akan membuat sebuah animasi sederhana dengan di kendalikan oleh tombol dan masing-masing tombol ini mempunyai fungsi yang berbeda. Oke kita akan membuat sebuah icon bus yang akan kita berikan animate() kemudian kita berikan fungsi stop() untuk berhenti, langsung saja kita lihat demo gambarnya

Nah teman-teman bisa lihat pada demo gambar di atas ini, jika di klik tombol “Jalankan Bus” maka akan di jalankan oleh fungsi animate()

$( "#go" ).click(function() {
  $( ".block" ).animate({ left: "+=200px" }, 3000 );
});

Kemudian tombol “STOP!” mempunyai fungsi stop() untuk mengatur berhentinya laju nya bus ketika di klik

$( "#stop" ).click(function() {
  $( ".block" ).stop();
});

Dan yang terakhir tombol “Mundur” ketika di klik maka bus akan mundur sebanyak px yang di berikan di sini saya berikan (-=300px)

$( "#back" ).click(function() {
  $( ".block" ).animate({ left: "-=300px" }, 700);
});

Baik kita buat seperti demo di atas, teman-teman jangan lupa siapkan text editornya lalu copy script di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Stop</title>
</head>
<body>
  <button id="go">Jalankan Bus</button>
  <button id="stop">STOP!</button>
  <button id="back">Mundur</button>
  <img src="bus-icon-5.png" class="block"/>
</body>
</html>

Kemudian pastekan pada text editornya, save dengan nama index.html dan buka pada browsernya. Maka output akan menghasilkan seperti gambar di bawah ini

Langkah berikutnya kita berikan css nya

<style>
 img {
   position: absolute;
   left: 0px;
   top: 30px;
   width: 150px;
   height: 70px;
   margin: 5px;
 }
 </style>

Tambahkan css nya di dalam tag <head>, langkah berikutnya kita berikan fungsi Jquerynya

Jangan lupa teman-teman berikan library Jquery nya, bisa juga copy link di bawah ini

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Kemudian kita berikan fungsi Jquerynya untuk menjalankan ketika tombol tersebut

<script>
$( "#go" ).click(function() {
  $( ".block" ).animate({ left: "+=200px" }, 3000 );
});
 
$( "#stop" ).click(function() {
  $( ".block" ).stop();
});
 
$( "#back" ).click(function() {
  $( ".block" ).animate({ left: "-=300px" }, 700);
});
</script>

Jika sudah save dan refresh, maka semua fungsi telah berhasil di buat.

Maka jika di klik “Jalankan Bus” akan selalu di tambahkan (+=200px)

Lalu “STOP!” yang mempunyai fungsi stop()

Dan yang terakhir tombol “Mundur” akan selalu di kurangi (-=300px) yang membuat bus tersebut mundur

Nah mudah sekali bukan, baik sekian dulu pada tutorial kali ini tentang Menggunakan Fungsi stop() Pada Jquery kita berjumpa lagi di tutorial berikutnya. Semoga bermanfaat dan Terimakasih.

Sampai Jumpa 🙂

Baca juga artikel tentang Cara Membuat Texture pada Text dengan CSS3

Menggunakan Fungsi stop() Pada Jquery

Kategori