Effect dengan jQuery
3:43 PM
1. Effect Hide
<script>
$(document).ready(function() {
$('.hide').click(function(){
$('.p1').hide();
});
$('.show').click(function(){
$('.p1').show();
});
$('.toggle').click(function(){
$('.p1').toggle();
});
});
</script>
<!-- html -->
<div style="width:500px;text-align:center;border:1px solid #B1B6D6;background-color:#dbffb1;">
<p class="p1">Ini adalah contoh penggunaan effect Show/Hide menggunakan effect JQuery, anda dapat mengembangkannya sesuai kemampuan anda. Saya hanya memberikan contoh dasarnya saja.Silakan anda klik tombol untuk mengetahui perbedaannnya.</p>
<p style="background-color:#ffb057;border-top:1px solid #777;"><button class="hide">Hide</button> <button class="show">Show</button> <button class="toggle">Toggle</button></p>
</div>
Ini adalah contoh penggunaan effect Show/Hide menggunakan effect JQuery, anda dapat mengembangkannya sesuai kemampuan anda. Saya hanya memberikan contoh dasarnya saja.Silakan anda klik tombol untuk mengetahui perbedaannnya.
2. Effect Slide
Efek slide digunakan untuk menghilangkan atau menampilkan elemen seperti membuka atau menutup sesuatu. Ada tiga jenis slide, yaitu SlideUp, SlideDown, dan SlideToggle.
Contoh code:
Contoh code:
<script>
$(document).ready(function() {
$('.hide2').click(function(){
$('.p3').fadeOut('slow')
});
$('.show2').click(function(){
$('.p3').fadeIn('slow')
});
$('.toggle2').click(function(){
$('.p3').fadeToggle('slow')
});
$('.fadeto').click(function(){
$('.p3').fadeTo('slow',0.25)
});
});
</script>
<!-- html -->
<div style="width:500px;text-align:center;border:1px solid #B1B6D6;background-color:#dbffb1;">
<p class="p2">Ini adalah contoh effect Slide pada JQuery, anda dapat mencoba langsung dengan meng-klik tombol doi bawah ini silakan anda pahami.</p>
<p style="background-color:#ffb057;border-top:1px solid #777;">
<button class="hide1">SlideeUp</button> <button class="show1">SlideDown</button> <button class="toggle1">SlideToggle</button></p>
</div>
Ini adalah contoh effect Slide pada JQuery, anda dapat mencoba langsung dengan meng-klik tombol doi bawah ini silakan anda pahami.
3. Effect Fade
<script>
$(document).ready(function() {
$('.hide2').click(function(){
$('.p3').fadeOut('slow')
});
$('.show2').click(function(){$('.p3').fadeIn('slow')});$('.toggle2').click(function(){$('.p3').fadeToggle('slow')});$('.fadeto').click(function(){$('.p3').fadeTo('slow',0.25)});
});
</script>
<!-- html -->
<div style="width:500px;text-align:center;border:1px solid #B1B6D6;background-color:#dbffb1;">
<p class="p3">Ini merupakan contoh penggunaan Fade pada JQuery, sekali lagi silakan anda pelajari dan pahami bagaimana perbedaan antara yang satu dengan lainnya.</p>
<p style="background-color:#ffb057;border-top:1px solid #777;">
<button class="hide2">FadeOut</button> <button class="show2">FadeIn</button> <button class="toggle2">FadeToggle</button><button class="fadeto">FadeTo</button></p>
</div>
Ini merupakan contoh penggunaan Fade pada JQuery, sekali lagi silakan anda pelajari dan pahami bagaimana perbedaan antara yang satu dengan lainnya.
4. Effect Bounce
<html lang="en">
<head>
<title>bounce demo</title>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
Klik dimana saja untuk memantulkan kotak.<br />
<div id="toggle">
</div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "bounce", { times: 3 }, "slow" );
});
</script>
</body>
</html>
Click anywhere to toggle the box.
BLIND : Digunakan untuk memberikan sebuah efek yang memunculkan elemen satu persatu. ada dua pilihan blind dalam dreamweaver, yaitu blind up dan blind down.
$('#object').toggle("blind", {
direction: "horizontal"
}, 1000);
direction: "horizontal"
}, 1000);
CLIP : Efek ini akan menutup elemen menuju garis pusat atau membuka elemen dari garis tengah.
$('#object').toggle("clip", {
direction: "horizontal"
}, 1000);
direction: "horizontal"
}, 1000);
DROP : Efek ini akan menampilkan / menyembunyikan elemen dengan efek memudar bersamaan
dengan perubahan letak sesuai dengan direksinya.
dengan perubahan letak sesuai dengan direksinya.
$('#object').hide("drop", {
direction: "up"
}, 1000);
direction: "up"
}, 1000);
EXPLODE : Memberikan sebuah kesan efek meledakkan elemen.
$('#object').hide("explode", {
pieces: 36
}, 1000);
pieces: 36
}, 1000);
FOLD : Elemen akan dikenai efek melipat. Batas akhir lipatan bisa ditentukan dalam opsi. Default arah lipatan adalah vertikal kemudian horizontal.
$('#object').hide("fold", {
size: 10
}, 1000);
size: 10
}, 1000);
PUFF : Elemen akan dikenai efek hembusan (membesar dan memudar). Besar elemen dapat ditentukan dalam opsi (persentase).
$('#object').hide("puff", {
percent: 300
}, 1000);
percent: 300
}, 1000);
SCALE : Efek ini akan menutup elemen dengan efek mengecil / membuka elemen dengan efek membesar.
$('#object').toggle("scale", {
origin: ["top", "left"]
}, 1000);
origin: ["top", "left"]
}, 1000);
SIZE
$('#object').effect("size", {
to: {
width: "50%",
height: "20%"
} }, 1000);
to: {
width: "50%",
height: "20%"
} }, 1000);
SHAKE
$('#object').effect("shake", {
times: 7
}, 1000);
times: 7
}, 1000);
TRANSFER
$('#object').effect("transfer", {
to: "#foo"
}, 1000);
to: "#foo"
}, 1000);
0 comments