Quotes
Laki-laki yang memperlakukan kekasihnya dengan lembut pasti dibesarkan oleh wanita yang berkelas. Orang tua yang kasar akan membesarkan anak yang kasar kepada pasangannya. Berkenalan dengan orang tua kekasih bukanlah tanda akan melamar, tapi untuk mengenal kualitas pendidik anaknya.

close
1 Mar 2014

Beberapa Jenis Efek Toggle Dengan Jquery

Some Type Toggle Effect In Jquery - Secara sederhana Toggle di sini adalah sebuah tombol yang berguna untuk menyembunyikan dan menampilkan unsur lain dengan efek khusus yang halus.

 Efek Toggle Dengan Jquery

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>

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;
  }

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>

Efek-efek Toggle dengan Jquery


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


Semoga bermanfaat..

Sumber : http://www.kompiajaib.com/2013/12/beberapa-jenis-efek-toggle-dengan-jquery.html

8 Komentar

Dengan menggunakan efek toggel ini blog jadi kelihatan lebih atraktif ya :)

keren Sob, btw kunjungan pertama nih sob, lam kenal ya :)

Dengan menggunakan efek toggle menjadikan blog jadi lebih menarik ya mas
sepertinya ini kunjungan perdana saya nie, salam kenal ya sekalian ijin follow blognya :)

Itu udah pasti mas :)
betul perdana, selam kenal juga dan nnti sya follback..

♏♏♏ªªªªñÑñŤŤŤªªªªªPPPP sob

BERI KOMENTAR | KHUSUS PENGGUNA TERDAFTAR
Silahkan beri komentar Anda dengan bijak dan sesuai dengan topik (untuk komentar OOT sebaiknya di Forum Ngopi).

Batal
Terima kasih telah berkomentar
 
notifikasi
Tutup