Cara Menggunakan Attribute Delay() Pada Jquery
Di panduan kali ini sahabat akan belajar bagaimana cara cara menggunakan attribute delay() di jquery.
Hallo seluruh kembali lagi di panduan saya , bagi kali ini saya akan kembali mengeangkat sebuah bahan mengenai jquery dan kali ini saya akan memberikan bahan jquery attribute karena masih ada beberapa yang masih ingin saya bahas.
oke atribute delay() berfungsi bagi 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-tama 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>
karenanya hasilnya akan seperti ini :
silahkan klik run di button tersebut dan lihat hasilnya , oke itu saja bagi kali ini semoga bermanfaat dan hingga bertemu di artikel berikutnya.
Sumber https://kursuswebsite.org
