Script not fading out non-active navigation links

问题

I am using a script on this page which does everything I want it to, i.e. changing the colour of the leaves in the nav bar on hover, fading between pages using a hash method, and the sliding of a contact form. The only thing that isn't working is the fading out of the .current div in the non-active nav links (i.e. when the user clicks on a leaf to change the page, I would like the green leaf on the page that has been left to fade out).

I was hoping that adding this code would handle the fading out of the links other than the active one, but when I add it to the delegate click function all leaves stay brown, i.e. it would appear that the not(this) is not working, and that all nav .current divs are faded to opacity:0:

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

        });

I have created a jsfiddle with the relevant code here. I also include the full script, and html and css for the nav bar below, and would be glad of some help to get this working.

Thanks,

Nick

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

回答1:

The issue is that $(".current") is selecting <div> elements. The function is firing on events attached to <a> elements, so this is referring to <a> elements, so not is never matching the elements.

To get not to match, you need to select the .current element which is contained within this as such:

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

回答2:

So the basic issue here is that, in the click handler, this refers to the a element that's been clicked, which is the parent of the div.current element you're targeting. Try:

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',
    },

});

来源：https://stackoverflow.com/questions/7878199/script-not-fading-out-non-active-navigation-links