Flash Like Hover Effect Using Jquery Web-development (PHP) Flash Like Hover Effect Using Jquery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.verttabnav ul li a').hover(function() { //mouse in $(this).animate({ paddingRight: '+=10px' }, 300); $(this).parent().animate({ left:'-=7'}, 300); }, function() { //mouse out $(this).animate({ paddingRight: '-=10px' }, 100); $(this).parent().animate({ left:'+=7'}, 300); }); }); </script> <style type="text/css"> .verttabnav { width:300px; } .verttabnav ul { margin: 0 4px 0 10px; list-style:none; } .verttabnav ul li { padding:0 0 0 0; border-bottom:1px solid #A38872; border-right:1px solid #A38872; border-top:1px solid #A38872; border-left:1px solid #A38872; margin:-1px 0 2px 0; position:relative; background:#FFEFD7; } .verttabnav ul li a { padding:10px 30px 10px 0; font-size:11px; color:#8c6d53; text-decoration:none; text-transform:uppercase; text-align:right; font-weight:bold; display:block; } .verttabnav ul li a:hover { color:#000; } </style> <div> <ul > <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a></li> <li><a href="#">Menu Item 3</a></li> <li><a href="#">Menu Item 4</a></li> <li><a href="#">Menu Item 5</a></li> <li><a href="#">Menu Item 6</a></li> <li><a href="#">Menu Item 7</a></li> <li><a href="#">Menu Item 8</a></li> </ul> </div>
0 Response to "Flash Like Hover Effect Using Jquery"
Posting Komentar