使用 jquery 在特定 div 下方设置动画按钮

Question

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

例子在这里Jsfiddle

问题是第二个按钮（选择时）移动到第一个按钮下方（尽管我在动画开始之前删除了 "non-choosed" 按钮。

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

试试这个：

<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" style="margin-top:250px">Botton B</button>
    <button class="bc" id="2">Botton C is below buton A and button B</button>
  </div>
</body>


$(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,
    top:20 //added code here
  }, "slow");

});

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

使用 jquery 在特定 div 下方设置动画按钮

Animate button below specific div using jquery

html

jquery

jquery-animate