Question

我试图将两个从同一位置开始的对象动画到最后的同一个位置。然而，即使在我的页面上它表示它们具有相同的top值，它们也不在同一个位置。

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

$('#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>

将两个对象设置为同一点，但一个较低

1 个答案: