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

9 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

Ecommerce & Responsive Website Development!
Creation of sites for business - the company WebiProg offers you bespoke web development and web design of online stores based on CMS OpenCart or other platforms. You will get: custom desing, speed optimization, security patches, catalog, multilingual, multisite, connection to different payment and delivery systems, etc. Visit our website!

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