-1

これが私がしたいことです：

ユーザーは、画面の外に表示されている div をアニメーション化しながら、現在画面に表示されていない div をアニメーション化するリンク/ボタンをクリックする必要があります。

問題：

.notcurrent私のコードは div をアニメーション化しますが、クラスを変更することはありません.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/

誰かが問題の原因を突き止めて、私が望むものをコーディングするためのより良い方法があるかどうかを教えてください。

4

2 に答える 2

0

うまくいかないことがいくつかあると思います。まず、現在の div を保持する変数を早い段階で作成しますが、それはクリック ハンドラーで再評価されません。常に同じ div を参照します。次に、「notCurrent」クラスを削除せずに「current」クラスを追加します。逆もまた同様です。修正版は次のとおりです。

http://jsfiddle.net/33D8c/

于 2012-04-06T01:20:38.757 に答える
0

これはあなたが欲しいものですか？

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");
    }
});​
于 2012-04-06T01:14:14.067 に答える