Question

div下面有3个按钮（带有margin-top值）。在用户点击其中一个之后，它应该被动画并移动到div下方。我成功只为第一个按钮做了。

示例在这里Jsfiddle

问题是第二个按钮（选择时）正在第一个按钮下移动（尽管我在动画开始之前删除了“未选择”按钮。

HTML：

<body>
  <div id="inner_body">
    <div>
      Animate button below me!
    </div>
    <button class="bc" id="0" style="margin-top:250px">Botton A</button>
    <button class="bc" id="1">Botton B</button>
    <button class="bc" id="2">Botton C is below buton A and button B</button>
  </div>
</body>

JavaSctipt：

$(document).on('click', '.bc', function() {
  var x = [];
  var y = [];
  //Saving original position
  for (var i = 0; i < 3; i = i + 1) {
    x[i] = $('#' + i + '').position().left;
    y[i] = $('#' + i + '').position().top;
  }

  //Locating all buttons with absolute position
  for (var i = 0; i < 3; i = i + 1) {
    $('#' + i + '').css({
      'position': 'absolute',
      'top': y[i] + 'px',
      'left': x[i] + 'px'
    })
  }

  //Hiding other buttons
  for (var i = 0; i < 3; i = i + 1) {
    if (i != this.id) {
      $('#' + i + '').remove();
    }
  }

  //Animating our buttons
  $(this).animate({
    left: 0,
    marginTop: 0
  }, "slow");

});

CSS：

    #inner_body {
  position: relative;
  margin: auto;
  text-align: center;
  margin-top: 50px
}

button {
  margin-right: 40px;
  padding: 20px;
  background-color: #718bf3;
}

Answer 1

您需要使用top : 0,和marginTop : height of the div

//Animating our buttons
  $(this).animate({
    left: 0,
    top: 0,
    marginTop: $('#inner_body > div').outerHeight()
  }, "slow");

Jsfiddle

Answer 2

试试这个：

{{1}}

只需在按钮A和B中添加margin-top值，然后在动画时添加top：20。

使用jquery在特定div下面的动画按钮

2 个答案: