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

Question

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

当行是全宽（4 列）和移动设备（1 列）但在 2 列布局（480 像素到 882 像素）时，它运行良好，position().left 返回 0，因此负边距不是' t 被正确应用并且生物离开屏幕。

我一生都想不通这是为什么...任何帮助都非常感谢！

相关网站：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>

我希望这会有所帮助！

干杯！