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

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

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

在您的其他地方添加此代码。如果它不起作用，请告诉我。

Answer 2

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

更简单的方法是使用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;
}

单击即可将多个元素移动到不同的位置

2 个答案: