javascript - 通过按钮使div float

我在使div从右侧浮动到恰好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>

它应该从右边浮动到中间（精确到50％），但是它什么也没做。而且我不知道为什么。

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

最佳答案

尝试这个

完整的工作示例JS-Fiddle

还包括用户clickoutside和close按钮。如果我错过了什么，请写评论。

如果您还想要一个垂直居中的框，只需更新我的动画即可：

$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'
});

关于javascript - 通过按钮使div float ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40150788/