日期:2014-05-16 浏览次数:20346 次
<table id="menu"> <tr> <td><img src=""/></td> <td><div id="autowidth1"></div><a href="#">考勤打卡</a></td> </tr> <tr> <td><img src=""/></td> <td><div id="autowidth2"></div><a href="#">我的考勤</a></td> </tr> <tr> <td><img src=""/></td> <td><div id="autowidth3"></div><a href="#">考勤统计</a></td> </tr> </table>
#menu{ border: 1px #000 solid; width: 100%; } a{ text-decoration: none; color: #A67D3D; } #autowidth1,#autowidth2,#autowidth3{ border: 1px #000 solid; height: 20px; width: 0px; position: absolute; display: none; } .hidle{ display: none; }
$("td:has(div)").hover( function(){ var id=$(this).attr("id"); alert(id); $("td div").animate({width:"+70px"},1000); }, function(){ $("td div").animate({width:"-70px"},1000).animate({display:"none"},1000); } );
$("td:has(div)").hover( function(){ $("div",this).animate({width:"+70px"},1000); }, function(){ $("div",this).animate({width:"-70px"},1000).animate({display:"none"},1000); } );
------解决方案--------------------
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.6.1.js"></script> <title>dnd</title> <style type="text/css"> #menu{ border: 1px #000 solid; width: 100%; } a{ text-decoration: none; color: #A67D3D; } #autowidth1,#autowidth2,#autowidth3{ border: 1px red solid; height: 20px; width: 0px; position: absolute; display: none; } .hidle{ display: none; } </style> <script type="text/javascript"> $(function(){ $("td:has(div)").each(function(){ $(this).hover( function(){ $("div",this).show(1000).animate({width:"+70px"},1000); }, function(){ $("div",this).animate({width:"-70px"},1000,function(){ $(this).hide(1000); }); } ); }); }); </script> </head> <body> <table id="menu"> <tr> <td><img src=""/></td>