脚本不会淡出非活动导航链接

Question

我在此页面上使用一个脚本，它可以完成我想要的一切，即更改叶子的颜色悬停时的导航栏、使用哈希方法在页面之间淡入淡出以及联系表单的滑动。唯一不起作用的是非活动导航链接中的 .current div 淡出（即，当用户单击叶子更改页面时，我希望页面上的绿色叶子已被离开淡出）。

我希望添加此代码能够处理活动链接以外的链接的淡出，但是当我将其添加到委托单击功能时，所有叶子都保持棕色，即看起来 not(this) 不起作用，并且所有 nav .current div 都淡入不透明度：0：

$(".current").not(this).stop().animate({
            opacity: 0
        }, {
            duration: 2000,
            specialEasing: {
                opacity: 'linear',
            },

        });

我使用相关代码创建了一个 jsfiddle 这里。我还包括完整的脚本以及下面导航栏的 html 和 css，并且很高兴能提供一些帮助来使其正常工作。

谢谢，

尼克

SCRIPT

$(function ()
{

    var newHash = "",
        $mainContent = $("#main-content"),
        $pageWrap = $("#page-wrap"),
        baseHeight = 0,
        $el,
        $panel = $("#panel");

    $panel.visible = false;

    $("nav").delegate("a", "click", function ()
    {
        window.location.hash = $(this).attr("href");
        $("#panel").slideUp("slow");
        $(this).addClass('clicked');
        $("a").not(this).removeClass('clicked');
        $(".current", this).stop().animate({
            opacity: 1
        }, {
            duration: 100,
            specialEasing: {
                opacity: 'linear',
            },

        });

        return false;
    });

    $("#nav-bottom").delegate("a", "click", function ()
    {
        $("#panel").slideDown("slow");
        return false;
    });

    $(window).bind('hashchange', function ()
    {

        newHash = window.location.hash.substring(1);

        if (newHash)
        {
            if ($panel.visible)
            {
                $pageWrap.animate({ height: "-=" + $panel.height() + "px" }, function ()
                {
                    $pageWrap.height($pageWrap.height());
                    $panel.visible = false;
                });
                $panel.slideUp();
                baseHeight = $pageWrap.height() - $mainContent.height() - $panel.height();
            }
            else
            {
                $pageWrap.height($pageWrap.height());
                baseHeight = $pageWrap.height() - $mainContent.height();
            }

            $mainContent
                .find("#guts")
                .fadeOut(500, function ()
                {
                    $mainContent.hide().load(newHash + " #guts", function ()
                    {
                        $pageWrap.animate({ height: baseHeight + $mainContent.height() + "px" }, function ()
                        {
                            $mainContent.fadeIn(500);
                            $pageWrap.css("height", "auto");
                        });

//                        $("nav a").removeClass("current");
//                        $("nav a[href=\"" + newHash + "\"]").addClass("current");
                    });
                });
        };
    });

    $("#contact").click(function ()
    {
        $("#panel").slideDown("slow");
//        $(this).addClass("current");
//        $("#home, #about").removeClass("current");
        $panel.visible = true;
        return false;
    });

    $(".close").click(function ()
    {
        $("#panel").slideUp("slow");
//        $(curTab).addClass("current");
//        $("#contact").removeClass("current");
        $panel.visible = false;
        return false;
    });

    $("nav a").hover(
        function() {
            if(!$(this).hasClass('clicked')){

            $(".current", this).stop().animate({
                opacity: 1
            }, {
                duration: 300,
                specialEasing: {
                    opacity: 'linear',
                },

            });
            }
        }, function() {
        if(!$(this).hasClass('clicked')){
            $(".current", this).stop().animate({
                opacity: 0
            }, {
                duration: 2000,
                specialEasing: {
                    opacity: 'linear',
                },

        });

        }
    });

    $(window).trigger('hashchange');

});

HTML

<nav>

<div id="nav1">
     <a href="index.html" class="fade" id="index">

     <div class="nav-image"><img src="images/bodhi-leaf-brown.png"></div>

     <div class="current"><img src="images/bodhi-leaf-green.png"></div>
     <div class="text"><img src="images/home.png"></div>

     </a>
</div>

<div id="nav2">
     <a href="about.html" class="fade" id="about">

     <div class="nav-image"><img src="images/bodhi-leaf-brown.png" class="flip"></div>

     <div class="current"><img src="images/bodhi-leaf-green.png" class="flip"></div>
     <div class="text"><img src="images/about.png"></div>

     </a>
</div>

<div id="nav3">

     <a href="index.html" class="" id="contact">

     <div class="nav-image"><img src="images/bodhi-leaf-brown.png"></div>

     <div class="current"><img src="images/bodhi-leaf-green.png"></div>
     <div class="text"><img src="images/contact.png"></div>

     </a>
</div>

</nav>

CSS

nav {
    width: 650px;
    height: 170px;
    position: absolute;
    top: 100;
    left: 200;
}

#nav1 {
    position: absolute;
    top: 0;
    left: 120px;
}

#nav2 {
    position: absolute;
    top: 0;
    left: 340px;
}

#nav3 {
    position: absolute;
    top: 0;
    left: 560px;
}


.nav-image  {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;

}

.current {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    opacity: 0;
}

Answer 1

问题是 $(".current") 正在选择

元素。该函数在附加到 元素的事件上触发，因此 this 引用 元素，因此 not 永远不会匹配元素。

要使 not 匹配，您需要选择 this 中包含的 .current 元素，如下所示：

$(".current").not($(".current",this))

Answer 2

所以这里的基本问题是，在点击处理程序中，this 引用了被点击的 a 元素，它是您要定位的 div.current 元素。尝试：

var $this = $(this),
    $others = $('nav a').not(this);

$(".current", this).stop().animate({
    opacity: 1
}, {
    duration: 100,
    specialEasing: {
        opacity: 'linear',
    },

});

$(".current", $others).stop().animate({
    opacity: 0
}, {
    duration: 2000,
    specialEasing: {
        opacity: 'linear',
    },

});