tRikSonic
Tema

Fungsi jQuery hide (), Belajar jQuery

Terakhir diperbarui : 23 Mei 2018 - 15.56

Tutorial jquery hide()

Fungsi hide() pada jQuery - jquery hide() digunakan untuk menyembunyikan atau menghilangkan element yang terlihat pada browser dengan metode interaktif yang dilakukan oleh user, baik itu dengan metode klik fungsi, mouse fungsi, tombol fungsi pada komputer dll.
jQuery hide()

Syntax:

$(selector).hide(speed,callback);

Contoh penerapan jquery hide()

Contoh 1 :
$(function(){
   $(".hide").click(function(){
     $("#demo").hide();
   });
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
#demo {
   background: #ffbccb;
   padding: 15px;
   border: 1px solid gainsboro;
   border-radius: 4px;
   margin: 10px 0px;
}
</style>
</head>
<body>

<button class="hide">hide</button>

<div id="demo">
Tekan tombol Run untuk menyegarkan editor
</div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(function(){
   $(".hide").click(function(){
     $("#demo").hide();
   });
});
</script>

</body>
</html>
Contoh 2 :
$(function(){
   $(".hide").click(function(){
     $("#demo").hide("slow");
   });
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
#demo {
   background: #ffbccb;
   padding: 15px;
   border: 1px solid gainsboro;
   border-radius: 4px;
   margin: 10px 0px;
}
</style>
</head>
<body>

<button class="hide">hide</button>

<div id="demo">
Tekan tombol Run untuk menyegarkan editor
</div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(function(){
   $(".hide").click(function(){
     $("#demo").hide("slow");
   });
});
</script>

</body>
</html>
Contoh 3 :
$(function(){
   $(".hide").click(function(){
     $("#demo").hide(2000);
   });
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
#demo {
   background: #ffbccb;
   padding: 15px;
   border: 1px solid gainsboro;
   border-radius: 4px;
   margin: 10px 0px;
}
</style>
</head>
<body>

<button class="hide">hide</button>

<div id="demo">
Tekan tombol Run untuk menyegarkan editor
</div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(function(){
   $(".hide").click(function(){
     $("#demo").hide(2000);
   });
});
</script>

</body>
</html>
Contoh 4 :
$(function(){
   $(".hide").click(function(){
     $("#demo").hide("slow",jsAlert);
   });
});

function jsAlert(){
   alert("Hai saya Alert");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
#demo {
   background: #ffbccb;
   padding: 15px;
   border: 1px solid gainsboro;
   border-radius: 4px;
   margin: 10px 0px;
}
</style>
</head>
<body>

<button class="hide">hide</button>

<div id='demo'>
Tekan tombol Run untuk menyegarkan editor
</div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(function(){
   $(".hide").click(function(){
     $("#demo").hide("slow",jsAlert);
   });
});

function jsAlert(){
   alert("Hai saya Alert");
}
</script>

</body>
</html>
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.