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