当另一个动画向上移动时，jQuery动画一个Div向下移动

我的页面上有3个div，A，B和C.当我点击AI时，它希望它向上移动200px并添加“活动”类，当我再次点击它时，它会向下移动并移除活动类。 我已设法做到这一点，但是，我现在需要这样做，所以只有一个div处于活动状态，所以如果一个div启动（或“活动”）并且我点击另一个，则“活动”div首先向下移动然后向下移动另一个div向上移动。

例如，如果A处于活动状态且我单击B，则A必须先向下移动然后B向上移动。

这是我移动div的代码（你会看到还有一个“close_A”元素，它只是一个关闭div的十字架）：

$(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改为Who，What和Why）：

 $(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'); }); });