jQuery Schalter Klasse nach der Animation nicht

Question

Hier arbeiten ist, was ich passieren soll:

Der Benutzer sollte einen Link/Button klicken, der einen div animieren wird, die derzeit nicht in den Bildschirm angezeigt wird, während die div Animieren der angezeigt wird, aus dem Bildschirm.

Das Problem:

Mein Code wird das das divs in und aus animieren, aber nicht der Klasse ändern .notcurrent-.current und umgekehrt.

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

anschauliches Beispiel: http://jsfiddle.net/bz6cH/20/

Kann jemand bitte herauszufinden, was das Problem verursacht, und wenn es eine bessere Art und Weise zu codieren, was ich will?

Answer 1

das ist was du willst?

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

Ich denke, es gibt ein paar Dinge, die Sie tun, die nicht funktionieren. Zunächst erstellen Sie eine Variable, um das aktuelle div zu halten, aber das wird in Ihren Click-Handlern nicht erneut ausgewertet. es wird sich immer auf dasselbe div beziehen. Zweitens fügen Sie die Klasse "current" hinzu, ohne die Klasse "notCurrent" zu entfernen, und umgekehrt. Hier ist eine korrigierte Version:

http://jsfiddle.net/33D8c/