當在scrollTop中使用時，jQuery animate（）在margin-left上無法正常工作

我有一個span類，當用戶向下滾動到160px時，應該使用animate（）顯示這個span類; 它第一次和第二次正常工作，之後animate（）顯示非常緩慢。當在scrollTop中使用時，jQuery animate（）在margin-left上無法正常工作

我的代碼..

<!DOCTYPE html> 
    <html> 
     <head lang="en"> 
      <meta charset="UTF-8"> 
      <title>tokka</title> 
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
      <style> 
       /*-------------- TopBar----------*/ 
       #topbar{ 
        padding: 0px; 
        background-color: #2483A0; 
       } 
       #topbar .topextra{ 
        background-color: #000000; 
        color: #ffffff; 
       } 

       #topbar .collection .logo_box{ 
        min-width: 200px; 
        padding: 1px; 
       } 
       #topbar .collection .logo_box a{ 
        display: inline-block; 
        margin-right: 5px; 
        color: #ffffff; 
       } 

      </style> 
      <script language="javascript" src="../lib/jquery/jquery.js"></script> 
      <script language="JavaScript" src="../lib/bootstrap/bootstrap.js"></script> 

      <script language="JavaScript" src="../lib/angular/angular.js"></script> 
      <script language="javascript"> 
       $(document).ready(function(){ 
        $(function() { 
         $(window).scroll(function() { 
          if ($(this).scrollTop() > 160) { 
           $("#category_navbar").slideUp(function(){ 
            $(".topextra").slideUp(); 
            $("#showmenow").animate({'margin-left':"0px"}); 
           }); 
          } else { 
           $(".topextra").slideDown(function(){ 
            $("#category_navbar").fadeIn(); 
            $("#showmenow").animate({'margin-left':"-50px"}); 
           }); 
          } 
         }); 

         // scroll body to 0px on click 
         /*$('#back-top a').click(function() { 
          $('body,html').animate({ 
           scrollTop: 0 
          }, 600); 
          return false; 
         });*/ 
        }); 
       }); 
      </script> 
     </head> 
     <body> 
      <br><br><br><br> 
      <div id="topbar" class="navbar navbar-default navbar-fixed-top topnavbar no-radius" role="navigation"> 
       <div class="container-fluid"> 
        <div class="row topextra"> 
         something 
        </div> 
        <div class="row collection"> 
         <div class="col-md-2"> 
          <div class="navbar-header"> 
           <div class="logo_box pull-right"> 
            <span id="showmenow" style="margin-left:-50px;"><a href="#"><h4>title</h4></a></span> 
            <a href="#"><img ng-src="..." style="height: 30px; width: 90px"/></a> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="navbar navbar-inverse" id="category_navbar" style="width:100%;position: fixed;"> 
       this is me 
      </div> 

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
     </body> 
    </html>

來源

2014-06-20 Murali Krishna

似乎在這個快速小提琴http://jsfiddle.net/5hU7b/工作對我罰款。小提琴是否適合你？ – AndrewPolland

它正在工作，但在到達頂端之後，標題進入非常緩慢。向下滾動三次，你會看到。我希望標題應該在我到達頂端時立即開始動畫。 –

啊我現在看到它。當我快速滾動時似乎會發生。一會兒我會看一看。 – AndrewPolland

似乎有兩個問題。

你生命的代碼是被稱爲只有一次slideUp()或slideDown動畫已經完成。因此，最好將它放在oncomplete函數之外，以便不管之前的動畫是否完成都將被調用。
您每次調用時都會調用動畫$(window).scroll()，即使它實際上沒有進行任何更改。即使動畫沒有做任何動作，動畫也需要一定的時間，因此等待之前的動畫完成時會造成延遲。我認爲在if語句中檢查是否需要動畫會解決這個問題。

所以，你的JS代碼將變爲：

$(document).ready(function(){ 
    $(window).scroll(function() { 
     if ($(this).scrollTop() > 160) { 
      if($("#showmenow").css('marginLeft')=="-50px"){ 
       //only run when animation is required 
       $("#showmenow").animate({'margin-left':"0px"}); 
      } 
      $("#category_navbar").slideUp(function(){ 
       //only runs after slideUp() has completed 
       $(".topextra").slideUp(); 
      }); 
     } else { 
      if($("#showmenow").css('marginLeft')=="0px"){ 
       //only run when animation is required 
       $("#showmenow").animate({'margin-left':"-50px"}); 
      } 
      $(".topextra").slideDown(function(){ 
       //only runs after slideDown() has completed 
       $("#category_navbar").fadeIn(); 
      }); 
     } 
    }); 
});

這裏的工作JS小提琴：http://jsfiddle.net/5hU7b/1/

輕微的替代，而不是使用if語句來檢查，如果動畫應該運行，您可以改用stop()（http://api.jquery.com/stop/）停止以前的動畫並清除隊列。在這種情況下，你的代碼將變成：

$(document).ready(function(){ 
    $(window).scroll(function() { 
     if ($(this).scrollTop() > 160) { 
      //stop previous animations and clear queue 
      $("#showmenow").stop(true).animate({'margin-left':"0px"}); 
      $("#category_navbar").slideUp(function(){ 
       //only runs after slideUp() has completed 
       $(".topextra").slideUp(); 
      }); 
     } else { 
      //stop previous animations and clear queue 
      $("#showmenow").stop(true).animate({'margin-left':"-50px"}); 
      $(".topextra").slideDown(function(){ 
       //only runs after slideDown() has completed 
       $("#category_navbar").fadeIn(); 
      }); 
     } 
    }); 
});

而這裏的JS小提琴：http://jsfiddle.net/5hU7b/2/

來源

2014-06-20 10:27:24 AndrewPolland

使用stop（）完全適合我。謝謝。 –

@MuraliKrishna很高興爲你工作:) – AndrewPolland

當在scrollTop中使用時，jQuery animate（）在margin-left上無法正常工作

回答

相關問題