Beberapa Jenis Efek Toggle Dengan Jquery

Beberapa Jenis Efek Toggle Dengan Jquery

Bola Hero Gawai

Beberapa Jenis Efek Toggle Dengan Jquery

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


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....

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

80 Comments Add Comment

hhh beakkeun topic ieu pastina @@,

Balas

ijin mendalami ilmu ini kang ;) hehee

Balas

Hehehehe terang wae kang Beben mah =D :p

Balas

Silahkan sis Dwi... ^_^ selamat berkreasi :D

Balas

Cadas lah, mantap. Good job mas adi :D

Balas

Waduh gak dapat pertamax nih. Gara2 pulang sekolahnya lama :D

Balas

wah mantab kang kompi .....
mas tolong bukak out of topic saya ada pertanyaan :)

Balas

Manyaknyussss....ijin nyoba dulu mas

Balas

keren mas, buat bisa tidak untuk menerapkan efek lagi di js ini mas?

$(window).scroll(function(){
if ($(this).scrollTop() > 800) {
$('#kislidingbox').css({'right':'0px'});
} else {
$('#kislidingbox').css({'right':'-350px'});
}
});

$(document).ready(function(){
var kislidingbox = $('#kislidingbox');
var closed = $('#kislidingbox-close');
var minimize = $('#kislidingbox-minimize');
var maximize = $('#kislidingbox-maximize');

maximize.hide();

closed.click(function(){
kislidingbox.css({'right':'-350px'});
kislidingbox.fadeOut('slow');
})
minimize.click(function(){
kislidingbox.toggle()('hide');
$(this).hide();
maximize.show();
})
maximize.click(function(){
kislidingbox.toggle()('hide');
$(this).hide();
minimize.show();
})
});


biar slidingnya ada nampak efek-efek seperti diatas mas?

Balas

behh,, ngiler saya dah liat efek2 toggle tu kang.. ^_^

Balas

Makasih kang =D

Balas

Coba kalau terbang pasti cepet heheheh :D

Balas

Iya nanti saya jawab =D

Balas

Silahkan bereksperimen mas :D

Balas

Coba saja bereksperimen dengan mengganti kode "hide" pada kelompok toggle-nya dengan efek-efek di atas.

Balas

Tisu...mana tisu...? Nih kang tisunya hehehehe :D

Balas

tidak berkerja mas, bingung :(

Balas

Kang, masukin CSS sama HTML nya dimana ya ??? :D

Balas

Jangan lupa tambahkan jquery-ui.js
Sudah saya coba pada social sliding close Kompi Centil namun efeknya kurang bagus, harus membangun struktur baru lagi agar efek toggel di atas bisa bekerja.

Balas

Seperti biasa kalau CSS di atas skin dan HTML disimpan di mana kita ingin menampilkannya.

Balas

kalo saya mau nerapkan efek bounce, javascript nya taruh di tata letak => Javascript ?

Balas

Bisa di atas </head> atau di atas </body>

Balas

jadi aneh mas efeknya.. bingung, coba share saja mas biar bisa belajar bersama :-d

Balas

Javascript efek blind nya udah di taro di atas </head> dan </body> tapi gak ada efek apapun =(

Balas

Jangan lupa pakai ini
<script type='text/javascript'>
Javascript di sini
</script>

Balas

Saya kurang faham kang sama togel kode buntut hehe
kereenn kang efect'y lagi nyoba yang bounce nih

Balas

udah di terapkan,tpi gk ngaruh juga @@,

Balas

Yang faham togel kode buntut mah tuh PAK MADI yang suka nyepam di mana-mana wkwkwkwkw =D =D
Pasti jadi sesuatu yang keren nih :D :D

Balas

Kode 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>


Udah ada belum di blognya? Jika belum coba pasang dulu di atas kode </head>

Balas

Sepertinya ada yang salah tuh mas nyimpen kode javascript toggle-nya =D

Balas

menyimak dan siap dipraktekkan sob

Balas

Sip berhasil :-bd

Tapi waktu toggle nya di klik malah langsung keatas gitu,kenapa ya ??

Balas

Silahkan mas :D

Balas

Sepertinya akan lebih bagus pasang kode HTMLnya tidak melalui tata letak tapi lewat edit HTML

Balas

Katinggalan berita yeuh sayah... tadi pagi blum update skarang sudah rame :)
Saya pelajari dulu kang,,,

Balas

Mangga kang :D

Balas

Kalo pasang kode HTML di edit HTML gimana kang ? :D

Balas

Pak Madi itu sopo mas ? :)

Balas

efek drop dan clip keren tu, halus.... yg bounce bergetar, kyk kesetrum :D
mantap artikelnya :-d

Balas

wow mangstab.. maenannya jQuery seakarang :-bd sedikit tambahan kang, lebih tepatnya jQuery UI kali ya :)

Balas

Hehehe mungkin sista Kiki yang kesetrum... =D tuh kakinya nginjek kabel... hehehehe

Balas

Sedikit-sedikit kang... susah banget ngerti bahasa javascript... hehehe iya kang soalnya biarpun sudah ada jquery tapi tanpa jquery ui enggak jalan =D

Balas

pilih yang mana ya..:D habis bagus " makasi sharenya mas adhy

Balas

hehe...mas Adhy bs aja ni :D

Balas

wkwkwkwk ngiler script ama efeknya kang ._.

Balas

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

sama ini tidak sama ya mas?

<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>

Balas

Sama =D hanya beda versi sama hostingnya aja....

Balas

Sama-sama mas Zul =D

Balas

Makasih sis =D

Balas

Bentar mas saya pelajari terlebih dahulu efek-efeknya, lumayan juga untuk memanjakan visitor. Thanks 4 share om :)

Balas

apakah browser berpengaruh mas, lihat di demo ko efeknya sama semua :( :p

Balas

kereenn mass :D saya hanya melonggo saja dan masih belum mengerti hehe

Balas

mantap bang. Mudah dan ganti efek nya tinggal ganti kata yg ada di dalam toogle nya

Balas

melihat kestabilan dan support berbagai framework, mending versi 1.10.2 kang

Balas

Sama-sama mas Adit :D

Balas

Saya pakai FF dan Chrome ga ada masalah mas :D mungkin plugin pada browsernya berpengaruh juga...

Balas

Hehehhe... ada-ada aja sista Friska ^_^

Balas

Iya jika kita bosan dengan efek satu kita bisa dengan mudah mengganti ke efek lainnya =D

Balas

aslina kareren kang.. tp bingung bade d pasang di palih mana hehe...

www.apkprime.com

Balas

ini baru tutor yg bagus... 1 bosan bisa ganti yg lain.. mancapp

Balas

ternyata browser nya bermasalah mas, sekarang sudah oke :D tutorial tentang jquery ( jquery ui ) nya mantap

Balas

Bagu Kang Effects -effects nya sangat menarik tapi
Harus di pasang juga yah Kang jquery ui.js yah Kang :)

Balas

Selsmat psgi datang hanya untuk .menyimak dan nggak bisa praktek

Balas

kang cara masukin java script efek slide gimana yah ? mohon bantuannya :-)

Balas

Simpan di atas kode </head> atau di atas kode </body> dengan menggunakan ini
<script type='text/javascript'>
Javascript di sini
</script>

Balas

mantap kang tapi kalo pake kode <a href="#" jadi kaya backtotop hehe , saya ubah jadi div aja ya kang hrefnya diapus

Balas

Iya kang jika pakai toggel harus pasang jquery-ui :)

Balas

Selamat pagi sista ^_^

Balas

Ya betul kang :-bd

Balas

Kalo pasang kode HTML di edit HTML gimana kang ?

Balas

ternyata mau toggle ini kerja dengan sempurna harus menyisipkan 2 jquery ini ya mas

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

Balas

hatur nuhun kang!!
mawa mangfaat kanggo abi!!

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×