Ditulis oleh: Ditulis pada: 12/17/2013
Secara sederhana toggle di sini adalah sebuah tombol yang berguna untuk menyembunyikan dan menampilkan unsur lain dengan efek khusus yang halus. Banyak widget di blog yang menggunakan toggle dan kali ini saya akan share beberapa jenis efek toggle dengan jquery. Dengan ini kita bisa berkreasi membuat widget di dalam blog dengan sentuhan efek-efek toggle. Setelah berkelana saya mengumpulkan beberapa efek toggle diantaranya ada sekitar 10 efek yang akan saya share kali ini.
Persyaratan pertama yang harus ada di blog yaitu tentunya jquery. Silahkan simpan jquery di bawah ini di blog Anda, jika sudah ada berapa pun versinya silahkan abaikan langkah ini.
<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Kode CSS
.button1 {
width: 217px;
font-size:16px;
font-family:Arial;
font-weight:normal;
border:1px solid #3866a3;
padding:9px 18px;
text-decoration:none;
background-color:#63b8ee;
color:#ffffff;
display:inline-block;
text-shadow:1px 1px 0px #7cacde;
box-shadow:inset 1px 1px 0px 0px #bee2f9;
}
.button1:hover {
background-color:#468ccf;
}
.toggler {
width: 500px;
height: 200px;
}
#box {
position: relative;
width: 240px;
height: 135px;
padding: 0.4em;
background-color:#efefef;
border:1px solid #ccc;
}
#box h3 {
margin: 0;
padding: 0.4em;
text-align: center;
border:1px solid #ccc;
background:#ddd;
}
Kode HTML
<a href="#" class="button1" id="run">Click Me</a>
<div class="toggler">
<div id="box">
<h3>Toggle</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>
1. Efek Blind
Javascript
$(function() {
$("#run").click(function () {
$("#box").toggle("blind")
});
});
2. Efek Bounce
Javascript
$(function() {
$("#run").click(function () {
$("#box").toggle("bounce")
});
});
3. Efek Clip
Javascript
$(function() {
$("#run").click(function () {
$("#box").toggle("clip")
});
});
4. Efek Drop
Javascript
$(function() {
$("#run").click(function () {
$("#box").toggle("drop")
});
});
5. Efek Explode
Javascript
$(function() {
$("#run").click(function () {
$("#box").toggle("explode")
});
});
6. Efek Fold
Javascript
$(function() {
$("#run").click(function () {
$("#box").toggle("fold")
});
});
7. Efek Pulsate
Javascript
$(function() {
$("#run").click(function () {
$("#box").toggle("pulsate")
});
});
8. Efek Scale
Javascript
$(function() {
$("#run").click(function () {
$("#box").toggle("scale")
});
});
9. Efek Shake
Javascript
$(function() {
$("#run").click(function () {
$("#box").toggle("shake")
});
});
10. Efek Slide
Javascript
$(function() {
$("#run").click(function () {
$("#box").toggle("slide")
});
});Selamat berkreasi....