下次滑动div触发时重置水平滑动div位置

Question

我的页面很长。我想把它分成 4 个迷你页面（divs），然后使用文本导航从一页 div 滑动到下一页。还有一个关闭按钮，可以隐藏所有 div 并显示下面的原始页面。

我遇到的问题是，当用户单击 link 到下一个 div 时，前一个 div 不会自行重置，就好像它从未被单击过一样.第一次点击 say "Page 2" 时，第 2 页 div 从左侧滑入，没问题。但是如果你稍后再点击它，div 只是出现，没有滑动动画。

我想使用 removeAttr("style");会完全按照我的意愿行事，但在这种情况下似乎行不通。

这是我的 jQuery:

$(".page-link").bind("click", function() {
    $(".ntc-pages").fadeOut(1000);
   //   THIS DOESN'T WORK
   // $(this).removeAttr('style');

var divId= $(this).attr("divId");
$("#" + divId).animate({
opacity: 1,
left: "0",
height: "toggle"},
 500, function() {
  });
});

和我的 HTML:

<a class="page-link" href="javascript:void(0);" divId="pg1">
    <h4>PAGE 1</h4>
</a>

<a class="page-link" href="javascript:void(0);" divId="pg2">
    <h4>PAGE 2</h4>
</a>

<a class="page-link" href="javascript:void(0);" divId="pg3">   
    <h4>PAGE 3</h4>
</a>

<a class="page-link" href="javascript:void(0);" divId="pg4">
    <h4>PAGE 4</h4>
</a>


<div class="ntc-pages" id="pg1">PAGE 1<a class="page-link" href="javascript:void(0);" divId="pg2"> PAGE 2</a> 
<a class="back-ntc" href="javascript:void(0);">Back</a>
</div>

<div class="ntc-pages" id="pg2">PAGE 2<a class="page-link" href="javascript:void(0);" divId="pg3"> PAGE 3</a> 
<a class="back-ntc" href="javascript:void(0);">Back</a>
</div>

<div class="ntc-pages" id="pg3">PAGE 3<a class="page-link" href="javascript:void(0);" divId="pg4"> PAGE 4</a> 
<a class="back-ntc" href="javascript:void(0);">Back</a>
</div>

<div class="ntc-pages" id="pg4">PAGE 4<a class="page-link" href="javascript:void(0);" divId="pg1"> PAGE 1</a> 
<a class="back-ntc" href="javascript:void(0);">Back</a>
</div>

以及 JS Fiddle 现在的工作原理。

Answer 1

你的问题的原因是你从来没有 return 动画 div 回到它的原始位置（左边 -1200px），所以当你下次去动画它时，它已经在那里（左边 0px），这就是滑动似乎不起作用的原因。

还有几件事要注意：

而不是使用 divID，使用类似数据属性的东西会更正确，例如 data-page="1" 并由 $("#someID").data("page")
不是在你的锚点上使用 href="javascript:void(0);"，而是在你的 JS 代码中你可以传入事件对象，例如 $(".page-link").click(function(e) {...}); 并使用 e.preventDefault(); 来停止链接执行
不要绑定点击功能，只需使用 jQuery 点击，就像我在最后一点所做的那样
如果你想用 JS 改变对象的样式，你可以使用 $(".myClass").css("left", "-1200px");

因此，为了快速解决您的问题，您可以将 $(".ntc-pages").css("left", "-1200px"); 添加到绑定函数回调的顶部，但我建议您也仔细阅读并添加上述一些建议。

这是添加了上述行的 jsfiddle：https://jsfiddle.net/ens28yxp/

下次滑动div触发时重置水平滑动div位置

Reset horizontal sliding div position when next sliding div is triggered

jquery

slider

position

reset