當下一個滑動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/