动画不工作后的jQuery开关类

以下是我希望发生的事情：

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

问题是：

“我的代码”将设置div输入和输出的动画，但不会将类从

.notcurrent

更改为

.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>

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

实例：

有人能找出问题的原因吗？有没有更好的方法来编写我想要的代码？

这就是你想要的

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");
    }
});​

---

我认为你正在做的一些事情是行不通的。首先，在早期创建一个变量来保存当前div，但在单击处理程序中不会重新计算该变量；它总是引用同一个div。其次，添加“current”类而不删除“notCurrent”类，反之亦然。下面是一个更正的版本：

---

这是一个问题还是一个答案？你做了什么来改进代码？它看起来与我使用的代码没有任何不同，你做了什么更改吗？哦，是的，这是有效的，但我仍然不知道你更改了什么以及为什么要修改它？对不起，我没有单击“无用”。我看到的唯一区别是使用$（'.current'）而不是缓存版本。。。这是唯一的改变吗？难道你不能比较一下代码并思考一下吗？而不是立即单击“无用”按钮。在button click函数中，您应该每次都获得$（'.current'），因为带有.current类的dom已更改，但var current=$（'.current'）；始终指向同一个dom。您犯的第二个错误是.attr（“class”，“current”），双引号将您的代码发布在此处，而不仅仅是在其他网站上。@tw16，感谢您通过添加代码编辑此问题。。我甚至不知道你能做到。