当下一个滑动div被触发时重置水平滑动div位置

Question

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

我遇到的问题是，当用户点击链接到下一个div时，以前的div不会重置自己，就好像它从未被点击过。第一次点击“说第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

你问题的原因是你永远不会将动画div返回到它的原始位置（-1200px到左边），所以当你下一次去动画它时，它已经在那里了（0px到左边），这就是为什么滑动不起作用。

一对夫妇的其他注意事项：

• 而不是使用divID，那将是更正确的$("#someID").data("page")
• 使用而不是使用href="javascript:void(0);"的类似数据属性，如data-page="1"和参考你的锚点，在你的JS代码中，你可以传递事件对象，如$(".page-link").click(function(e) {...});，并利用e.preventDefault();来阻止链接执行
• 而不是绑定click功能，只需使用jQuery单击像我一样在最后一点
• 如果你想改变风格与JS的对象，你可以这样做使用$(".myClass").css("left", "-1200px");

所以，快速解决您的问题，您可以添加$(".ntc-pages").css("left", "-1200px");到绑定函数回调的顶部，但我会建议通过并添加一些上述建议以及。

这里是一个jsfiddle与上述行添加：https://jsfiddle.net/ens28yxp/