Menggunakan Fungsi stop() Pada Jquery
Halo teman-teman, berjumpa lagi dengan saya di panduan Source Code Aplikasi. Di artikel kali ini kita akan Menggunakan Fungsi stop() Pada Jquery, dan di latihan yang akan kita praktekkan yaitu merancang sebuah kegunaan dan diantara kegunaan ini kita berikan kegunaan stop(). Kali ini kita akan merancang sebuah animasi sederhana dengan di kendalikan oleh tombol dan masing-masing tombol ini mempunyai kegunaan yang berbeda. Oke kita akan merancang sebuah icon bus yang akan kita berikan animate() kemudian kita berikan kegunaan stop() bagi berhenti, seketika saja kita lihat demo gambarnya
Nah teman-teman dapat lihat di demo gambar di atas ini, jikalau di klik tombol “Jalankan Bus” karenanya akan di jalankan oleh kegunaan animate()
$( #go ).click(function() {
$( .block ).animate({ left: +=200px }, 3000 );
});Kemudian tombol “STOP!” mempunyai kegunaan stop() bagi mengatur berhentinya laju nya bus ketika di klik
$( #stop ).click(function() {
$( .block ).stop();
});Dan yang terakhir tombol “Mundur” ketika di klik karenanya bus akan mundur sebanyak px yang di berikan di sini saya berikan (-=300px)
$( #back ).click(function() {
$( .block ).animate({ left: -=300px }, 700);
});Bagus kita bikin 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 di text editornya, save dengan nama index.html dan buka di browsernya. Karenanya 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 pada tag <head>, langkah berikutnya kita berikan kegunaan Jquerynya
Jangan lupa teman-teman berikan library Jquery nya, dapat pun copy link di bawah ini
<script src=https://code.jquery.com/jquery-1.10.2.js></script>
Kemudian kita berikan kegunaan Jquerynya bagi 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>
Sekiranya telah save dan refresh, karenanya segala kegunaan telah berhasil di bikin.
Karenanya jikalau di klik “Jalankan Bus” akan selalu di tambahkan (+=200px)
Lalu “STOP!” yang mempunyai kegunaan stop()
Dan yang terakhir tombol “Mundur” akan selalu di kurangi (-=300px) yang merancang bus tersebut mundur
Nah gampang sekali bukan, bagus demikianlah dulu di panduan kali ini mengenai Menggunakan Fungsi stop() Pada Jquery kita berjumpa lagi di panduan berikutnya. Semoga bermanfaat dan Terimakasih.
Hingga Jumpa 🙂
Baca pun artikel mengenai Cara Membuat Texture pada Text dengan CSS3
Sumber https://kursuswebsite.org
