jquery - 动画后的jQuery切换类不起作用

Question

这是我想要发生的事情：

用户应该单击一个链接/按钮，该链接/按钮将为当前未显示在屏幕上的 div 设置动画，同时为屏幕外显示的 div 设置动画。

问题：

我的代码将为进出的 div 设置动画，但不会将类从.notcurrentto更改为.current反之亦然。

HTML：

<button id="R">Click 1</button>
<button id="G">Click 2</button>
<button id="B">Click 3</button>

<div id="box">
    <div id="one" class="current">
    </div>
    <div id="two" class="notcurrent">  
    </div>
    <div id="three" class="notcurrent">
    </div>
</div>

JS：

var panel1 = $('#one');
var panel2 = $('#two');
var panel3 = $('#three');

var current = $('.current');
var notcurrent = $('.notcurrent');

var cTop = current.css('top');
var nTop = notcurrent.css('top');

var button1 = $('#R');
var button2 = $('#G');
var button3 = $('#B');

button1.click(function() {
    if (panel1.css('top') === '500px') {
        current.animate({
            top: "500px"
        }).attr("class", notcurrent);

        panel1.animate({
            top: "0px"
        }).attr("class", current);
    }
});

button2.click(function() {
    if (panel2.css('top') === '500px') {
        current.animate({
            top: "500px"
        }).attr("class", notcurrent);

        panel2.animate({
            top: "0px"
        }).attr("class", current);
    }
});

button3.click(function() {
    if (panel3.css('top') === '500px') {
        current.animate({
            top: "500px"
        }).attr("class", notcurrent);

        panel3.animate({
            top: "0px"
        }).attr("class", current);
    }
});

现场示例：http: //jsfiddle.net/bz6cH/20/

有人可以找出导致问题的原因以及是否有更好的方法来编写我想要的代码？

Answer 1

这就是你想要的？

var panel1 = $('#one');
var panel2 = $('#two');
var panel3 = $('#three');

var current = $('.current');
var notcurrent = $('.notcurrent');

var cTop = current.css('top');
var nTop = notcurrent.css('top');

var button1 = $('#R');
var button2 = $('#G');
var button3 = $('#B');

button1.click(function() {
    if (panel1.css('top') === '500px') {
        $('.current').animate({
        top: "500px"
        }).attr("class", "notcurrent");

        panel1.animate({
        top: "0px"
        }).attr("class", "current");
    }
});

button2.click(function() {
    if (panel2.css('top') === '500px') {
        $('.current').animate({
        top: "500px"
        }).attr("class", "notcurrent");

        panel2.animate({
        top: "0px"
        }).attr("class", "current");
    }
});

button3.click(function() {
    if (panel3.css('top') === '500px') {
        $('.current').animate({
        top: "500px"
        }).attr("class", "notcurrent");

        panel3.animate({
        top: "0px"
        }).attr("class", "current");
    }
});​

Answer 2

I think there are a couple of things you have going on that are not working. First, you create a variable early on to hold the current div, but that's not re-evaluated in your click handlers; it's always going to refer to the same div. Secondly, you're adding the "current" class without removing the "notCurrent" class, and vice versa. Here's a corrected version:

http://jsfiddle.net/33D8c/