Jquery有关问题求教-JavaSript-爱易网页

Jquery有关问题求教

日期：2014-05-16　浏览次数：20425 次

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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

Jquery有关问题求教

相关资料更多>

推荐阅读更多>