Jquery有关问题求教

2012-03-30

Jquery问题求教页面html代码如下：HTML codetable idmenutrtdimg src//tdtddiv idaut

Jquery问题求教
页面html代码如下：

HTML code

            <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>

CSS code

#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代码：

JScript code

$("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的菜鸟，看说明文档也想不出什么办法来实现我的效果，所以，请大虾们多多指教，拜谢！！！

[解决办法]

JScript code

$("td:has(div)").hover(        function(){            $("div",this).animate({width:"+70px"},1000);        },    function(){        $("div",this).animate({width:"-70px"},1000).animate({display:"none"},1000);    }    );
[解决办法]
HTML code<!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>

热点排行

JavaScript

Jquery有关问题求教