Question

以下是我想要发生的事情：

用户应点击一个链接/按钮，该动画将动画当前未显示在屏幕中的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/

有人可以找出造成问题的原因，是否有更好的方法来编码我想要的内容？

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

我认为你发生了一些不起作用的事情。首先，您在早期创建一个变量来保存当前div，但是不会在您的点击处理程序中重新评估它;它总是会引用相同的div。其次，您在不删除“notCurrent”类的情况下添加“当前”类，反之亦然。这是一个更正版本：

http://jsfiddle.net/33D8c/

动画不能正常工作后的jQuery开关类

2 个答案: