动画后的jQuery切换类不起作用答案

【问题标题】：jQuery switch class after animation not working动画后的jQuery切换类不起作用
【发布时间】：2012-04-06 01:06:34
【问题描述】：

这是我想要发生的事情：

用户应单击链接/按钮，该链接/按钮将为当前未显示在屏幕上的 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>

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/

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

【问题讨论】：

在此处发布您的代码，而不仅仅是在其他网站上。
@tw16，感谢您通过添加代码来编辑问题。我什至不知道您可以这样做。

标签： jquery class jquery-animate attr

【解决方案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");
    }
});

【讨论】：

这是一个问题还是一个答案？你做了什么来改进代码？
它看起来和我使用的代码没有什么不同，你有什么改变吗？
哦，是的，这可行，但我仍然不知道您更改了什么以及为什么要修复它？
对不起，我没有点击“没用”。我看到的唯一区别是您使用 $('.current') 而不是缓存版本...这是唯一的变化吗？
不能对比一下代码想想吗？而不是立即单击“没用”按钮。在按钮单击功能中，您应该每次都获得 $('.current')，因为具有 .current 类的 dom 发生了变化，但是 var current = $('.current');总是指向同一个dom。你犯的第二个错误是 .attr("class", "current")，双引号

【解决方案2】：

我认为你正在做的一些事情是行不通的。首先，您在早期创建一个变量来保存当前的 div，但这并没有在您的点击处理程序中重新评估；它总是会引用同一个div。其次，您要添加“当前”类而不删除“非当前”类，反之亦然。这是一个更正的版本：

http://jsfiddle.net/33D8c/

【讨论】：