将两个对象动画到同一位置但一个较低

Question

我正在尝试为两个从相同位置开始到最后相同位置的对象制作动画。然而，尽管在我的页面上它说它们具有相同的 top 值，但它们不在同一个位置。

此外，为了清楚起见，我需要使用与演示中相同的 position 属性，我知道使用 position: absolute; 会更容易，但它不是我当前项目的选项.

$('#backdrop').click(function() {
  var sqT = $('#sq-green').offset().top - 100;

  $('#sq-green, #sq-blue').animate({
    'top': -sqT
  })
})

#backdrop {
  background: #ccc;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
#sq-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sq {
  height: 4em;
  width: 4em;
  position: relative;
}
#sq-green {
  background: green;
  top: 4em;
}
#sq-blue {
  background: #337ab7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div id="backdrop">
        <div id="sq-container">
          <div class="sq" id="sq-green">
          </div>
          <div class="sq" id="sq-blue">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Fiddle Demo

Answer 1

最初两个元素都出现在相同的位置，因为使用 CSS 为绿色元素提供的 top 值。如果此设置不存在，它们将一个位于另一个下方。

#sq-green {
    background: green;
    top: 4em; /* this is the reason why they are present in same position */
}

4em 的 top 值等于绿色元素的高度，因此它被推到下方自己的高度，因此最终与蓝色元素处于相同的位置。

如果在动画之后还需要它们在同一个位置，那么就需要获取绿色元素的height并将其添加到计算值中。

$('#backdrop').click(function() {
  var sqT = $('#sq-green').offset().top - 100;
  var height = $('#sq-green').height();
  $('#sq-green').animate({
    'top': -sqT + height
  });
  $('#sq-blue').animate({
    'top': -sqT
  });
})

$('#backdrop').click(function() {
  var sqT = $('#sq-green').offset().top - 100;
  var height = $('#sq-green').height();
  $('#sq-green').animate({
    'top': -sqT + height
  });
  $('#sq-blue').animate({
    'top': -sqT
  });
})

#backdrop {
  background: #ccc;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
#sq-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sq {
  height: 4em;
  width: 4em;
  position: relative;
}
#sq-green {
  background: green;
  top: 4em;
}
#sq-blue {
  background: #337ab7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div id="backdrop">
        <div id="sq-container">
          <div class="sq" id="sq-green">
          </div>
          <div class="sq" id="sq-blue">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

将两个对象动画到同一位置但一个较低

Animating two objects to the same spot but one is lower

css

jquery

jquery-animate