页面html代码如下: <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;
}jquery代码:$("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);
}
);
我预想的效果:当鼠标移动到3个选项中的任何1个的时候,和那个选项同行的div的width自动增长显示,移出的时候缩回隐藏。但是我这样写发现鼠标一移动上去3个div一起增长,移出一起缩回,而且还不能隐藏,也就是说display:none无效。我想试着当鼠标移动到某个选项上的时候就取的它的同行的div的id,再判断id是哪一个再决定哪个div增长。但是我测试了下,发现我这样只能取到第1个id为autowidth1的div,很郁闷。由于我是个jquery的菜鸟,看说明文档也想不出什么办法来实现我的效果,所以,请大虾们多多指教,拜谢!!!
<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;
}jquery代码:$("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);
}
);
我预想的效果:当鼠标移动到3个选项中的任何1个的时候,和那个选项同行的div的width自动增长显示,移出的时候缩回隐藏。但是我这样写发现鼠标一移动上去3个div一起增长,移出一起缩回,而且还不能隐藏,也就是说display:none无效。我想试着当鼠标移动到某个选项上的时候就取的它的同行的div的id,再判断id是哪一个再决定哪个div增长。但是我测试了下,发现我这样只能取到第1个id为autowidth1的div,很郁闷。由于我是个jquery的菜鸟,看说明文档也想不出什么办法来实现我的效果,所以,请大虾们多多指教,拜谢!!!
$("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>
<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></body></html>楼主是要这样的效果吗?