填充動畫等待時間

例如，當窗口向下滾動> 300px時，我正嘗試創建固定頂部菜單並調整它們的大小（通過更改填充頂部&底部）。如果我嘗試從頂部300px後，設置像$('nav').css('padding', '30px 0 30px 0');一樣的css風格都很好，但如果我嘗試用動畫做到這一點，我得到事件之間的巨大延遲。填充動畫等待時間

有例如：沒有動畫 - http://jsfiddle.net/g3xLgLeb/1/（所有做工精細）

隨着動畫 - http://jsfiddle.net/g3xLgLeb/（巨大的延遲）

來源

2014-09-04 kxc

每次滾動調用的動畫時間：你應該檢查之前，如果'$ nav.is（「：動畫」）;'開始一個新的動畫 – fcalderan 2014-09-04 11:11:39

希望這篇文章可以幫助你實現你的[目標]之前（ http://stackoverflow.com/questions/16442016/jquery-sticky-header-that-shrinks-when-scrolling-down） – Benjamin 2014-09-04 11:17:21

我寧願使用CSS過渡，而不是jQuery的動畫這一點。

下面介紹如何做到這一點。

添加以下CSS到現有的CSS文件：

.nav.custom{ 
    padding-top:5px; 
    padding-bottom: 5px; 
    -webkit-transition: all ease 0.5s; 
    -moz-transition: all ease 0.5s; 
    -ms-transition: all ease 0.5s; 
    transition: all ease 0.5s; 
}

使用下面的腳本：

$(document).ready(function() { 
     var $nav = $('.nav'); 
     $(window).scroll(function() { 
      if ($(this).scrollTop() > 350) { 
       $nav.addClass('custom'); 
      } else { 
       $nav.removeClass('custom'); 
      } 
     }); 
    });

注： CSS的過渡可能不會在一些較舊的瀏覽器。這是一個列表，顯示cross browser compatibility。

希望這會有所幫助。 :)

來源

2014-09-04 11:21:37

@Benjamin，我不認爲它會以這種方式工作。因爲'toggleClass'只有在scrollTop（）> 350'時纔會被調用。那麼它什麼時候纔會添加該類，何時刪除？ – 2014-09-04 11:26:53

哇，太棒了！謝謝;） – kxc 2014-09-04 11:31:20

@kxc它有幫助，但要小心你會遇到跨瀏覽器兼容性問題。 – Benjamin 2014-09-04 11:39:16

填充動畫等待時間

回答

相關問題