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和引用data-page="1"

$("#someID").data("page")

您可以在JS代码中传入事件对象（例如href="javascript:void(0);"）而不是在锚点上使用$(".page-link").click(function(e) {...});，而是使用e.preventDefault();来阻止链接执行< / LI>
而不是绑定click函数，只需像我在上一点那样使用jQuery click
如果您想使用JS更改对象的样式，可以使用$(".myClass").css("left", "-1200px");

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

这里添加了以上一行的jsfiddle：https://jsfiddle.net/ens28yxp/

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

1 个答案: