Skip to main content

Beberapa Jenis Efek Toggle Dengan Jquery

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")
});
 });
DEMO

2. Efek Bounce

Javascript


 $(function() { 
    $("#run").click(function () {
    $("#box").toggle("bounce")
});
 });
DEMO

3. Efek Clip

Javascript


 $(function() { 
    $("#run").click(function () {
    $("#box").toggle("clip")
});
 });
DEMO

4. Efek Drop

Javascript


 $(function() { 
    $("#run").click(function () {
    $("#box").toggle("drop")
});
 });
DEMO

5. Efek Explode

Javascript


 $(function() { 
    $("#run").click(function () {
    $("#box").toggle("explode")
});
 });
DEMO

6. Efek Fold

Javascript


 $(function() { 
    $("#run").click(function () {
    $("#box").toggle("fold")
});
 });
DEMO

7. Efek Pulsate

Javascript


 $(function() { 
    $("#run").click(function () {
    $("#box").toggle("pulsate")
});
 });
DEMO

8. Efek Scale

Javascript


 $(function() { 
    $("#run").click(function () {
    $("#box").toggle("scale")
});
 });
DEMO

9. Efek Shake

Javascript


 $(function() { 
    $("#run").click(function () {
    $("#box").toggle("shake")
});
 });
DEMO

10. Efek Slide

Javascript


 $(function() {  
    $("#run").click(function () { 
    $("#box").toggle("slide") 
}); 
 });
DEMO

Selamat berkreasi....

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB