javascript - 通过按钮让div float 进出

Question

我在使我的 div 从右侧 float 到屏幕的 50% 时遇到问题，我似乎无法弄清楚为什么它不起作用。

myFunction = function() {
  var divPosition = $(".FadeIn").offset();
  alert("Position: " + divPosition.left);
  if (divPosition.right < '200%') {
    $(".FadeIn").animate({
      right: '50%'
    }, 1000);
  } else {
    $(".FadeIn").animate({
      right: '100%'
    }, 1000);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="button" class="btn btn-primary" name="FadeButton" value="Lees meer..." onclick="myFunction()" />
</div>
<div class="FadeIn">
  Test
</div>

它应该从右边 float 到中间(正好是 50%)，但它什么也没做。我不知道为什么。

https://jsfiddle.net/mbqxch2d/1/

Answer 1

试试这个

完整的工作示例 JS-Fiddle

如果用户点击外部和关闭按钮，也包括在内。如果我遗漏了什么，请发表评论。

如果你还想要一个垂直居中的盒子，只需更新我的动画:

$moreSocialsContainer.fadeIn().animate({
  right: '50%',
  'margin-right': (((1 - $moreSocialsContainer.outerWidth(true)) + 1) / 2) + 'px',
  top: '50%',
  'margin-top': (((1 - $moreSocialsContainer.outerHeight(true)) + 1) / 2) + 'px'
});