jQuery Animate內聯風格問題

Question

我無法修復我的代碼中的一個錯誤。我創建點擊幻燈片向上/向下div，但是當我點擊它4倍非常快我的CSS頂值是高度和功能停止工作。你能給我建議一些解決方案或其他方式來處理這個問題嗎？

這裏是代碼：

$(function() { 
 
    $(".nav li a").click(function(event) { 
 
    var page = $(this).attr("href") 
 
    var topVal = $("#about").css("top") 
 

 
    if (topVal != "-500px") { 
 
     $(page).animate({ 
 
     top: "-=500" 
 
     }, 500).css("top", "-500px") 
 
    } else { 
 
     $(page).animate({ 
 
     top: "+=500" 
 
     }, 500) 
 
     event.preventDefault() 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav navbar-nav pull-right"> 
 
    <li><a href="#about">Start</a> 
 
    </li> 
 
    <li><a href="#">Start</a> 
 
    </li> 
 
    <li><a href="#">Start</a> 
 
    </li> 
 
    <li><a href="#">Start</a> 
 
    </li> 
 
</ul> 
 
<!-- About Page--> 
 
<section id="about" class="container-fluid col-md-9" style="top: -500px;">About 
 
</section>

Answer 1

這是你想要的嗎？

$(function() { 
 
    $(".nav li a").click(function(event) { 
 
    var page = $(this).attr("href") 
 
    var topVal = $("#about").css("top") 
 

 
    if (topVal != "-500px") { 
 
     $(page).animate({ 
 
     top: "-=500" 
 
     }, 500).css("top", "-500px") 
 
    } else { 
 
     $(page).animate({ 
 
     top: "+=500" 
 
     }, 500) 
 
     event.preventDefault() 
 
    } 
 
    }); 
 
});

section { position: relative; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav navbar-nav pull-right"> 
 
    <li><a href="#about">Start</a> 
 
    </li> 
 
    <li><a href="#">Start</a> 
 
    </li> 
 
    <li><a href="#">Start</a> 
 
    </li> 
 
    <li><a href="#">Start</a> 
 
    </li> 
 
</ul> 
 
<!-- About Page--> 
 
<section id="about" class="container-fluid col-md-9" style="top: -500px;">About 
 
</section>

我覺得這是更好的：

$(function() { 
 
    $(".nav li a").click(function(event) { 
 
    var href=$(this).attr('href'); 
 
    $(href).toggleClass('offscreen'); 
 
    event.preventDefault() 
 
    }); 
 
});

section { position: relative; transition: 0.5s all; top:0 } 
 
.offscreen { top: -500px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav navbar-nav pull-right"> 
 
    <li><a href="#about">Start</a> 
 
    </li> 
 
    <li><a href="#">Start</a> 
 
    </li> 
 
    <li><a href="#">Start</a> 
 
    </li> 
 
    <li><a href="#">Start</a> 
 
    </li> 
 
</ul> 
 
<!-- About Page--> 
 
<section id="about" class="container-fluid col-md-9 offscreen">About 
 
</section>