一次单击将多个元素移动到不同的位置

Question

我希望在一些我根本找不到答案的事情上得到一些帮助。这是我的Codepen的链接：http://codepen.io/Fern444/pen/WRGZNz

所以我要做的就是写一段代码，让每一个#box元素在同一时间移动到不同的点，只需点击一个按钮，然后再点击另一个按钮。

我已经达到了可以同时将元素移动到同一位置的地步，但是我完全不知道如何将它们移动到不同的位置。这是我的jquery解决方案，主要由我在其他地方找到的多个答案改编而成：

$(document).ready(function() {
$('.home-button').click(function(){
if($('.home-button').hasClass('active')){
    $('#box1, #box2').animate({
        width: "60",
        height: "0",
    }, 1000);
$(this).removeClass('active');
}  
else{
    $('#box1, #box2').animate({
        width: "50", 
        height: "300",
    }, 1000);
$(this).addClass('active');        
 };   

})；})；

有谁有什么建议给我吗？任何帮助都是非常感谢的！

干杯，杰克

Answer 1

您可以简单地为每个框使用不同的动画功能，并提供不同的位置。但是我看到你在增加宽度和高度，这是不正确的。你需要改变位置。

一种更简单的方法是使用CSS。

在您的笔中查看此示例编辑：http://codepen.io/vinit-sarvade/pen/RKgMrP

$(document).ready(function() {
   $('.home-button').click(function(){
      $('#box1, #box2').toggleClass('active');  
    });
});

#box1.active {
  top: 120px;
}

#box2.active {
  top: 180px;
}

Answer 2

这是您正在寻找的解决方案吗？

  $('#box1').animate({
        width: "50", 
        height: "300",
    }, 1000);
   $('#box2').animate({
        width: "50", 
        height: "200",
    }, 1000);

将此代码添加到您的else中。A如果不起作用，请让我知道。