Beberapa Jenis Pengaruh Toggle Dengan Jquery

Secara sederhana toggle di sini yakni sebuah tombol yang berkhasiat untuk menyembunyikan dan menampilkan unsur lain dengan imbas khusus yang halus. Banyak widget di blog yang memakai toggle dan kali ini aku akan share beberapa jenis imbas toggle dengan jquery. Dengan ini kita dapat berkreasi menciptakan widget di dalam blog dengan sentuhan efek-efek toggle. Setelah berkelana aku mengumpulkan beberapa imbas toggle diantaranya ada sekitar 10 imbas yang akan aku share kali ini.

Persyaratan pertama yang harus ada di blog yaitu tentunya jquery. Silahkan simpan jquery di bawah ini di blog Anda, jikalau 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....

Sumber https://www.kompiajaib.com/

Share this post