position().left 没有给出预期值

Question

在Wordpress网站的员工部分，当您单击每张员工照片时，我正在尝试在正确的位置打开生物幻灯片。

当行是全宽（4 列）和移动（1 列）但在 2 列布局（480px 到 882px）中，position（）.left 返回 0，因此负边距未正确应用并且生物离开屏幕。

我一辈子都想不通为什么会这样......任何帮助将不胜感激！

有问题的网站：http://contractor-marketing.website/

HTML （简化）：

<div class="row">
  <div class="column column_1">
    <!--content-->
    <div class="bio-full"><!--content--></div>
  </div>
  <div class="column column_2">
    <!--content-->
    <div class="bio-full"><!--content--></div>
  </div>
  <div class="column column_3">
    <!--content-->
    <div class="bio-full"><!--content--></div>
  </div>
  <div class="column column_4">
    <!--content-->
    <div class="bio-full"><!--content--></div>
  </div>
</div>

JS：

jQuery('.column').each(function(s, el) {
  jQuery(this).find('.bio-full').eq(0).css('margin-left',-(jQuery(el).position().left));
});

Answer 1

检查我下面的例子。虽然我采用了不同的方法，但它基本上可以做你想要的，它甚至可以为元素过渡设置动画。

注意：每次按下动画按钮时都会发生此动画。您必须防止此类动画多次发生（如果这是您要查找的行为）。此外，将$('#animate')选择器和click事件更改为您选择的事件。

$('#animate').click(function() {
  $(".bio-full").animate({
    left: "+=300",
  }, 1000, function() {
    // Animation complete.
  });
});

body{
  padding:0;
  margin:0;
}
.bio-full{
  background-color: red;
  display:hidden;
  position:relative;
  width:300px;
  left:-300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="animate">Animate</button>
<div class="row">
  <div class="column column_1">
    <!--content-->
    <div class="bio-full"><h1>Profile</h1></div>
  </div>
  <div class="column column_2">
    <!--content-->
    <div class="bio-full"><h1>Profile</h1></div>
  </div>
  <div class="column column_3">
    <!--content-->
    <div class="bio-full"><h1>Profile</h1></div>
  </div>
  <div class="column column_4">
    <!--content-->
    <div class="bio-full"><h1>Profile</h1></div>
  </div>
</div>

我希望这有帮助！

干杯！