fadeOut不工作

时间:2013-02-22 02:37:15

标签: javascript jquery html fadein fadeout

我是网页设计的新手。我现在正在制作简历。我有这样的导航div:

<div id="nav" class="grid_12">
    <div id="Home" class="grid_3">
        <div class="button">
            <a href="#">Home</a>
        </div>
    </div>

    <div id="Life" class="grid_3">
        <div class="button">
            <a href="#">Life</a>
        </div>
        <img src="img/someimg.jpg">
    </div>

    <div id="Portfolio" class="grid_3">
        <div class="button">
            <a href="#">Portfolio</a>
        </div>
    </div>

    <div id="Contact" class="grid_3">
        <div class="button">
            <a href="#">Home</a>
        </div>
    </div>
</div>

然后我有一个导航脚本:

<script type="text/javascript>
    $("#nav img").hide();
    $(".button").focus(function() {
        $(this).next("img").fadeIn("slow");
    }).blur(function() {
    $(this).next("img").fadeOut("slow");
    }); 
</script>

我希望如此,当有人将鼠标悬停在按钮上时,图像将显示在其下方。它正确隐藏图像,但淡入淡出不起作用。我不知道它为什么不起作用。

3 个答案:

答案 0 :(得分:0)

.focus绑定到"focus"事件(我链接到它的内容而不是事件标准)。当您选中或单击文本输入时,这是最常见的,但它也可以应用于其他元素。

mouseenter(也是mouseover,但当子元素也悬停时,前者不会重复触发)当鼠标进入元素时会发生事件。相反的是mouseleavemouseout)。 http://api.jquery.com/mouseenter/

答案 1 :(得分:0)

尝试将您的脚本放在文档的ready事件中:

<script type="text/javascript>
         $(document).ready(function(){
            $("#nav img").hide();
            $(".button").focus(function() {
                $(this).next("img").fadeIn("slow");
            }).blur(function() {
                $(this).next("img").fadeOut("slow");
            }); 
         });
</script>

答案 2 :(得分:0)

我相信你正在使用960gs,我注意到的一件事是:你的四个grid_3 div嵌套在你的grid_12中。 960gs包含两个名为.alpha.omega的类,用于在网格位于父网格内时修复嵌套边距。您需要将.alpha课程放在第一个子div上 - 在这种情况下,您的<div id="#home">.omega课程位于最后一个子div上,即<div id="Contact">。这将修复您在内部嵌套的四个grid_3上的边距。