jQuery动画联系_jquery_动画_其他

<!doctype html> <html> <head> <meta charset="utf-8"> <title>突出显示2</title> </head> <style type="text/css"> *{ margin:0; padding:0; list-style:none;} .con{ width:790px; height:362px; border: 1px solid #000; margin:100px auto; background:#000;} .con ul li{ float:left; width:158px; height:362px; overflow:hidden;} .con img{ display:block;} .con a{ display:block;} </style> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ $('.con ul li a').hover(function(){ //$('.con ul li a').stop().animate({'margin-left':'0px','opacity':'0.5'},500); //$(this).parent().parent().find('a').stop().animate({'margin-left':'0px','opacity':'0.5'},500); $(this).closest('ul').find('a').stop().animate({'margin-left':'0px','opacity':'0.5'},200); $(this).stop().animate({'margin-left':'-15px','opacity':'1'},200); },function(){ $(this).closest('ul').find('a').stop().animate({'margin-left':'0px','opacity':'1'},200); }); }); </script> <body> <div class="con"> <ul> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> </ul> </div> <div class="con"> <ul> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> </ul> </div> <div class="con"> <ul> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> </ul> </div> <div class="con"> <ul> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> <li> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> <a href="javascript:;" rel='nofollow' onclick='return false;'></a> </li> </ul> </div> </body> </html>