Menghilangkan Objek dengan Jquery

Jquery adalah framework untuk javascript. Fungsinya tentu saja untuk memanipulasi tampilan HTML kita menjad lebih interaktif. Karena pengolahan HTMLnya akan langsung terjadi pada saat itu juga tanpa perlu mereload browser. Salah satu fitur yang ada pada Jquery akan kita bahas ini adalah fitur fadeout. Fade out ini adalah fitur untuk menghilangkan objek dengan Jquery. Jadi saat kita membuat suatu trigger apapun itu, bisa tombol atau menu navigasi, maka saat itu terjadi pada objek yang telah kita set akan menghilang.

Penggunaan fungsi fadeout pada Jquery akan sangat membantu kalian dalam hal menyembunyikan objek tertentu yang dirasa perlu di sembunyikan sementara tergantung kondisinya. Untuk lebih jelasnya kalian bisa mengikuti contoh yang akan kita praktekkan bersama-sama. Langkah awalnya kalian bisa salin contoh code dibawah ini agar mempersingkat waktu.

fade.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){      
        $("#div3").fadeOut(2000);
    });
});
</script>
</head>
<body>

<h1> Contoh Penggunaan Fade Out pada Jquery </h1>
<p> Klik tombol ini untuk menghilangkan box di bawah </p>
<button> Hilang </button> <br> <br>

<div id="div3" style=" width: 80px; height: 80px; background-color: blue; "></div>

</body>
</html>

Setelah sudah kalian simpan file tersebut dengan format html. Untuk melihat hasilnya kalian cukup buka file tersebut pada browser kalian. Jika sudah maka hasilnya akan seperti ini.

menghilangkan-objek-dengan-jquery-rangga1-290917

Gambar diatas adalah tampilan awalnya. Pada browser akan muncul sebuah kotak lalu sebuah tombol. Tombol tersebut sebagai pemancing apabila ditekan maka box dibawahnya akan menghilang sesuai dengan perintah yang telah kita tulis pada bagian tag <script>.

$(document).ready(function(){ $("button").click(function(){ $("#div3").fadeOut(2000); }); });

Pada perintah inilah kita mengatur script jquery dimana pada kondisi tersebut saat tombol di klik, maka id div3 dimana itu menunjukan untuk id boxnya akan di fadeout dengan delay sebanyak 2000. Sehingga hasilnya akan seperti gambar ini.

menghilangkan-objek-dengan-jquery-rangga2-290917

Gambar kotak tersebut hilang dari pandangan. Namun sebenarnya script dari div box tersebut masih ada, hanya statusnya kita sembunyikan . Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara menghilangkan objek dengan Jquery. Semoga bermanfaat.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *