Pada tutorial kali ini saya akan menunjukan bagaimana cara mengimplementasikan effect jquery yang bernama faddeIn dan FaddeOut untuk membuat sebuah effect galery .
hallo semuana sudah lama tak berjumpa dengan saya , masih di artikel tutorial dumetschool , terakhir saya posting tutorial kalu tidak salah membahas tentang jquery, nah untuk kali ini saya masih akan membahas tentang jquery tetapi lebih fokus ke implementasinya dari apa yang pernah kita pelajari.
Untuk sekarang saya akan membuat effect jquery dengan memanfaatkan fadeIn dan Fadeout, langsung saja saya tunjukan caranya silhkan anda salin code berikut ini :
<html>
<head>
<title></title>
<style>
.container{
width:900px;
margin: auto
}
.gb1{
width:200px;
}
.gb2{
position: relative;
left: -203px;
width:200px;
}
.gb3{
position: relative;
left: -408px;
width:200px;
}
.cl{
z-index: 99;
position: relative;
top:-84px;
}
.bt{
width:630px;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.gb1').fadeOut(10);
$('.gb2').fadeOut(10);
$('.gb3').fadeOut(10);
$('.cl').fadeOut(10);
$('.bt').fadeOut(10);
$('button').click(function(event){
$('.gb1').fadeIn(1000);
$('.gb2').fadeIn(1500).animate({'left':'10px'},1000);
$('.gb3').fadeIn(1500).animate({'left':'20px'},1400);
$('.cl').fadeIn(1300);
});
$('.gb1').click(function(event){
$('#bt1').fadeIn(1500);
$('#bt2').fadeOut(0);
$('#bt3').fadeOut(0);
});
$('.gb2').click(function(event){
$('#bt2').fadeIn(1500);
$('#bt1').fadeOut(0);
$('#bt3').fadeOut(0);
});
$('.gb3').click(function(event){
$('#bt3').fadeIn(1500);
$('#bt1').fadeOut(0);
$('#bt2').fadeOut(0);
});
$('.cl').click(function(event){
$('.gb2').animate({'left':'-203px'},'slow').fadeOut(1000);
$('.gb3').animate({'left':'-408px'},'slow').fadeOut(1000);
$('.gb1').fadeOut(1000);
$('.bt').fadeOut(1000);
});
});
</script>
</head>
<body>
<div class="container">
<button class="button">Galery</button><br><br>
<img class="gb1" src="image/Ajangprediksi.com-Jersey-Manchester-United-Terbaru.jpg">
<img class="gb2" src="image/CNZgZvbUYAI-KPD.jpg">
<img class="gb3" src="image/Cuplikan-Gol-Manchester-United-3-0-Aston-Villa-Premier-League.jpg">
<img class="cl" src="image/close_icon.png">
<br><br>
<img id="bt1" class="bt" src="image/Ajangprediksi.com-Jersey-Manchester-United-Terbaru.jpg">
<img id="bt2" class="bt" src="image/CNZgZvbUYAI-KPD.jpg">
<img id="bt3" class="bt" src="image/Cuplikan-Gol-Manchester-United-3-0-Aston-Villa-Premier-League.jpg">
</div>
</body>
</html>
setelah di salin silahkan di jalanlkan pada browser masing-masing dan lihat hasilnya:
#note : Wajib mengganti path folder gambar sesuai gambar kalian masing-masing
hasilnya akan seperti ini :
silahkan klik tombol galery untuk mendapatkan effectnya, oke itu saja sampai bertemu pada artikel selanjutnya 🙂