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.
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>