脚本不淡出非活动导航链接 [英] Script not fading out non-active navigation links
问题描述
我在此页面上使用了一个脚本，它可以完成我想要的所有内容，即更改颜色导航栏中的叶子悬停，使用哈希方法在页面之间淡入淡出，以及滑动联系表单。唯一不起作用的是在非活动导航链接中淡出.current div（即当用户点击叶子来更改页面时，我希望页面上的绿叶已经离开淡出）。
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).
我希望添加此代码可以处理除活动链接之外的链接的淡出，但是当我将其添加到委托时点击功能所有叶子保持棕色，即看起来不是（这个）不起作用，并且所有导航.current divs都褪色为不透明度：0：
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',
},
});
我用相关代码创建了一个jsfiddle 这里。我还包括完整的脚本，以及下面导航栏的html和css，并且很乐意为此工作提供一些帮助。
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.
谢谢，
尼克
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;
}
推荐答案
问题在于 $（。current）正在选择< div> 元素。该函数触发附加到< a> 元素的事件，因此此指的是< a> 元素，因此不永远不会匹配元素。
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.
要匹配而不是，您需要选择 .current 元素包含在此中：
To get not to match, you need to select the .current element which is contained within this as such:
$(".current").not($(".current",this))
这篇关于脚本不淡出非活动导航链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
