jQuery動畫一個Div向下移動時，另一個動畫

Question

我在我的頁面上有3個div，A，B和C.當我點擊AI時，希望它向上移動200px並添加「active」類，並且當我再次點擊它時，它會向下移動並刪除活動類。我設法做到這一點，但是，現在我需要做到這一點，所以只有一個div是活躍的，所以如果一個div上來（或「活躍」），我點擊另一個，「活動」div先下移然後另一個div上移。

例如，如果A處於活動狀態，並且我點擊B，則A必須首先向下移動，然後B向上移動。

這裏是我的代碼用於移動的div（你會看到還有就是一個將同時關閉DIV一個十字架「close_A」元素）：

$(document).ready(function() { 

    // OPEN AND CLOSE A // 

    $('.A').toggle(function() { 
     $('.A').animate({ 
      top: '-=200' 
     }, 1000).addClass('active'); 
    },function() { 
     $('.A').animate({ 
      top: '+=200' 
     }, 1000).removeClass('active'); 
    }) 
    $('.close_A').click(function() { 
     $(".A").click(); 
    }); 

    // OPEN AND CLOSE B // 

    $('.B').toggle(function() { 
     $('.B').animate({ 
      top: '-=200' 
     }, 1000).addClass('active'); 
    },function() { 
     $('.B').animate({ 
      top: '+=200' 
     }, 1000).removeClass('active'); 
    }) 
    $('.close_B').click(function() { 
     $(".B").click(); 
    }); 

    // OPEN AND CLOSE C // 

    $('.C').toggle(function() { 
     $('.C').animate({ 
      top: '-=200' 
     }, 1000).addClass('active'); 
    },function() { 
     $('.C').animate({ 
      top: '+=200' 
     }, 1000).removeClass('active'); 
    }) 
    $('.close_C').click(function() { 
     $(".C").click(); 
    }); 
}); 

所以我現在的問題是，如何我可以做到這樣，當一個人打開時，我點擊另一個人，首先關閉打開的人。

Answer 1

想我已經找到了答案......雖然有必須做這樣的一個較短的方式（順便說一句，我已經改變A，B和C是誰，是什麼和爲什麼分別）：

$(document).ready(function() { 

// OPEN AND CLOSE WHO //  

$('.who').click(function() { 

// IF WHAT IS OPEN, CLOSE FIRST, THEN OPEN WHO 

if($('.what').hasClass('active')) { 
$('.what').animate({ 
    top: '+=200' 
}, 1000).removeClass('active'); 
$('.who').animate({ 
    top: '-=200' 
}, 1000).addClass('active');  
} 

// IF WHY IS OPEN, CLOSE IT FIRST, THEN OPEN WHO 

else if($('.why').hasClass('active')) { 
$('.why').animate({ 
    top: '+=200' 
}, 1000).removeClass('active'); 
$('.who').animate({ 
    top: '-=200' 
}, 1000).addClass('active');  
} 

// IF WHO IS OPEN, CLICK TO CLOSE IT 

else if($('.who').hasClass('active')) { 
$('.who').animate({ 
    top: '+=200' 
}, 1000).removeClass('active'); 
} 

// IF NOTHING IS OPEN, CLICK TO OPEN WHO 

else 
$('.who').animate({ 
    top: '-=200' 
}, 1000).addClass('active'); 


}); 

// OPEN AND CLOSE WHAT // 

$('.what').click(function() { 

// IF WHO IS OPEN, CLOSE FIRST, THEN OPEN WHAT 

if($('.who').hasClass('active')) { 
$('.who').animate({ 
    top: '+=200' 
}, 1000).removeClass('active'); 
$('.what').animate({ 
    top: '-=200' 
}, 1000).addClass('active');  
} 

// IF WHY IS OPEN, CLOSE IT FIRST, THEN OPEN WHAT 

else if($('.why').hasClass('active')) { 
$('.why').animate({ 
    top: '+=200' 
}, 1000).removeClass('active'); 
$('.what').animate({ 
    top: '-=200' 
}, 1000).addClass('active');  
} 

// IF WHAT IS OPEN, CLICK TO CLOSE IT 

else if($('.what').hasClass('active')) { 
$('.what').animate({ 
    top: '+=200' 
}, 1000).removeClass('active'); 
} 

// IF NOTHING IS OPEN, CLICK TO OPEN WHAT 

else 
$('.what').animate({ 
    top: '-=200' 
}, 1000).addClass('active'); 


}); 

// OPEN AND CLOSE WHY //  

$('.why').click(function() { 

// IF WHO IS OPEN, CLOSE FIRST, THEN OPEN WHY 

if($('.who').hasClass('active')) { 
$('.who').animate({ 
    top: '+=200' 
}, 1000).removeClass('active'); 
$('.why').animate({ 
    top: '-=200' 
}, 1000).addClass('active');  
} 

// IF WHAT IS OPEN, CLOSE IT FIRST, THEN OPEN WHY 

else if($('.what').hasClass('active')) { 
$('.what').animate({ 
    top: '+=200' 
}, 1000).removeClass('active'); 
$('.why').animate({ 
    top: '-=200' 
}, 1000).addClass('active');  
} 

// IF WHY IS OPEN, CLICK TO CLOSE IT 

else if($('.why').hasClass('active')) { 
$('.why').animate({ 
    top: '+=200' 
}, 1000).removeClass('active'); 
} 

// IF NOTHING IS OPEN, CLICK TO OPEN WHY 

else 
$('.why').animate({ 
    top: '-=200' 
}, 1000).addClass('active'); 
}); 
});