Trick Jquery Slide Beralih Efek Pada Mouse

info-gamepc.blogspot.com - Di artikel sebelumnya, saya telah memberikan cara bagaimana menambahkan Jquery beralih slide yang berpengaruh terhadap klik mouse, Jquery ini adalah tutorial yang paling ditunggu para blogger untuk mencoba efek beralih.

Dalam efek beralih pada mouse, dalam kasus ini, saya memberikan tutorial pada mode otomatis saja, tetapi beberapa perubahan dapat disesuaikan dengan template anda. Untuk membuat mouse hover ini, saya akan menggunakan tag div untuk membuatnya mudah dimengerti. Jadi mari kita lanjutkan dengan artikel ini.

1. Berikut Kodenya.

<div id="mhovermenu"> <ul id="menu" class="menu"> <li><a href="#" id="title" class="menu_title">Link List1</a> <ul class="menu_body"> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> </li> <li><a href="#" id="title" class="menu_title">Link List2</a> <ul class="menu_body"> <li><a href="#">Link3</a></li> <li><a href="#">Link4</a></li> </ul> </li> <li><a href="#" id="title" class="menu_title">Link List3</a> <ul class="menu_body"> <li><a href="#">Link5</a></li> <li><a href="#">Link6</a></li> </ul> </li> </ul> </div>

2. Berikut Css Stylenya.

.menu{ width:300px; background:#000; margin:10px; padding:0; border:1px solid #000; cursor:pointer; } .menu_title{ color:#fff; padding:5px; font-size:25px; text-decoration:none; margin:5px; } .menu_body{ display:none; } .menu_body a{ padding:5px; color:#166217; display:block; position:relative; background:#fff; font-weight:bold; text-decoration:none; } ​

Dalam artikel inii kita menggunakan Id dari elemen Html untuk mendefinisikannya dalam Jquery. Ada begitu banyak kasus konflik pada efek beralih ini untuk dapat bisa bekerja. Saya membuatnya lebih sederhana.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(function() { $("#menu li").hover(function() { $(this).find("ul").slideToggle("fast"); }); }); </script> ​

Seperti kita lihat pada menu tag li di atas kode Jquery, itu mempertimbangkan unsur-unsur li elemen ul dengan menu id sebagai elemen induk dan tag ul anak di bawah itu dianggap sebagai elemen anak dan elemen-elemen ini memperoleh efek toggle. Anda bisa mengatur kecepatan efek beralih ke Lambat atau Cepat.