Membuat Effect Jquery Dengan Memanfaatkan FadeIn Dan FaddeOut
Di panduan kali ini saya akan menunjukan bagaimana cara mengimplementasikan effect jquery yang bernama faddeIn dan FaddeOut bagi membangun sebuah effect galery .
hallo semuana telah lama tak berjumpa dengan saya , masih di artikel panduan Source Code Aplikasi , terakhir saya posting panduan kalu tak salah membahas mengenai jquery, nah bagi kali ini saya masih akan membahas mengenai jquery tetapi lebih fokus ke implementasinya dari apa yang pernah kita pelajari.
Bagi sekarang ini saya akan membangun effect jquery dengan memanfaatkan fadeIn dan Fadeout, seketika saja saya tunjukan caranya silhkan kamu 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 di 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 bagi memperoleh effectnya, oke itu saja hingga bertemu di artikel berikutnya 🙂
Sumber https://kursuswebsite.org
