1

我有一系列触发 JQuery 动画的按钮，其中面板在页面底部下方向上滑动。面板绝对位于页面下方，当单击按钮时，相应的面板会动画。

该功能效果很好，但我只想能够在任何给定时间显示一个面板。

我的 HTML 是： 

<div id="footerNav">
<a class="button" id="b1" href="#"><span></span>Upcoming Events</a>
<a class="button" id="b2" href="#"><span></span>From the Blog</a>
<a class="button" id="b3" href="#"><span></span>Global Leaders</a>
<a class="button" id="b4" href="#">Watch Video</a>
</div>

<div id="paneb1" class="pane"></div>
<div id="paneb2" class="pane"></div>
<div id="paneb3" class="pane"></div>

我的jQuery是：

$("a.button").toggle(function(){
     idClick = $(this).attr("id");
     newSelector = $("#pane"+idClick);
     newSelector.animate({ 'bottom' : 99});
     $(this).addClass("activeBtn");
}, function(){
     newSelector.animate({ 'bottom' : -275});
     $(this).removeClass("activeBtn");
});

我尝试像这样使用 not 选择器，但它不起作用：

$(".pane:not(newSelector)").animate({ 'bottom' : -275});

我需要在这里做什么才能在切换按钮时将任何其他面板动画化回其原始位置？

4

2 回答 2

1

您可以使用not()方法而不是:not()选择器：

$(".pane").not(newSelector).animate({ bottom : -275 });

注意，最好使用局部变量而不是全局变量，所以var在定义新变量时考虑使用关键字：

var newSelector = $("#pane" + idClick);
于 2012-10-25T17:02:56.760 回答
1

尝试：

$(".pane").not(newSelector).animate({ 'bottom' : -275});

由于您的版本没有引用您制作的 javascript var，因此它正在寻找一个名为“newSelector”的选择器。

于 2012-10-25T17:03:33.790 回答