Question

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

当行是全宽（4列）和移动（1列）但在2列布局（480px到882px）时，它运行良好，位置（）。左边返回0，所以负边距是'n'正确应用，生物屏幕脱落。

我无法为我的生活弄清楚为什么会这样......非常感谢任何帮助！

相关网站：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事件更改为您选择的事件。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我希望这有帮助！

干杯！

position（）。left未给出预期值

1 个答案: