Pada tutorial kali ini anda akan belajar bagaimana cara cara menggunakan attribute delay() pada jquery.
Hallo semua kembali lagi pada tutorial saya , untuk kali ini saya akan kembali mengeangkat sebuah materi tentang jquery dan kali ini saya akan memberikan materi jquery attribute karena masih ada beberapa yang masih ingin saya bahas.
oke atribute delay() berfungsi untuk mengeatur sebuah element dengan sebuah durasi terntentu, misal saya memilik dua buah element kotak lalu saya ingin menghilangkan lalu menampilkanya lagi tetapi dengan durasi yang berbeda antara kotak pertama dengan kotak ke dua .
contohnya seperti ini :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>delay demo</title>
<style>
div {
position: absolute;
width: 60px;
height: 60px;
float: left;
}
.first {
background-color: #3f3;
left: 0;
}
.second {
background-color: #33f;
left: 80px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>
<script>
$( "button" ).click(function() {
$( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
$( "div.second" ).slideUp( 300 ).fadeIn( 400 );
});
</script>
</body>
</html>
maka hasilnya akan seperti ini :
silahkan klik run pada button tersebut dan lihat hasilnya , oke itu saja untuk kali ini semoga bermanfaat dan sampai bertemu pada artikel selanjutnya.