JQuery的無響應慢

我的jQuery代碼：JQuery的無響應慢

var divs = $('.headerlogo, .headertext'); 
$(document).ready(function(){ 
$(window).scroll(function() { 
if ($(this).scrollTop() > 100) { 
    divs.stop().fadeOut("fast"); 
    $('.header').animate({height:'35px'}, 500); 
    } 
else { 
    divs.stop().fadeIn("fast"); 
    $('.header').animate({height:'350px'}, 500); 
    } 
}); 
});

請在這裏找到我的全碼：http://jsfiddle.net/jJyJv/

當你當你向上滾動向下滾動的標題「縮水」的預期，但不回來像我預料的那樣回來。有時候只是標題的一小部分回來，然後幾秒鐘後它就會消失，或者有時候導航欄不見了，幾秒鐘後又回來了。它應該是即時和平穩的。

新的JQuery如此不確定爲什麼發生這種情況。任何指針都會很棒。

感謝

來源

2014-07-07 AnotherUser

你必須仔細檢查你的邏輯 - 添加的元素會更改您所需的滾動值。我已經清理了一點點，所以你可以檢查，但你必須玩的價值得到它的權利：http://jsfiddle.net/jJyJv/2/

var divs = $('.headerlogo, .headertext'); 
$(document).ready(function() { 
    var animating = false; 
    var $window = $(window); 
    $window.scroll(function() { 
     if (!animating) { 
      var $header = $('.header'); 
      if ($header.hasClass('open') && $window.scrollTop() > 100) { 
       animating = true; 
       divs.stop().fadeOut("fast"); 
       $header.animate({height:'35px'}, 500, function() { animating = false; }).removeClass('open').addClass('closed'); 
      } else if ($header.hasClass('closed') && $window.scrollTop() < 400) { 
       animating = true; 
       divs.stop().fadeIn("fast"); 
       $header.animate({height:'350px'}, 500, function() { animating = false; }).removeClass('closed').addClass('open'); 
      } 
     } 
    }); 
});

更好的解決方案是使用CSS3過渡，你可以讀到在：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

來源

2014-07-07 23:30:34 sahbeewah

所有好的答案，但像CSS3的替代，謝謝。 – AnotherUser

滾動處理程序執行時的窗口滾動，這意味着即使一個小的滾動操作處理程序將執行很多很多次，瀏覽器因此反應遲鈍/慢行爲。您看到的奇怪行爲是許多動畫動作堆積並順序執行的結果。

來源

2014-07-07 23:21:39 oliakaoil

即使元素已經具有應該擁有的狀態，您的動畫也會針對每個滾動事件運行。這將疊加大量的動畫，所以你必須等很長時間才能趕上。

使用varible跟蹤當前狀態的，只有動畫當您更改狀態：

var divs = $('.headerlogo, .headertext'); 
$(document).ready(function(){ 
    var open = true; 
    $(window).scroll(function() { 
    var s = $(this).scrollTop(); 
    if (open && s > 100) { 
     open = false; 
     divs.stop().fadeOut("fast"); 
     $('.header').animate({height:'35px'}, 500); 
     } 
    else if (!open && s <= 100) { 
     open = true; 
     divs.stop().fadeIn("fast"); 
     $('.header').animate({height:'350px'}, 500); 
     } 
    }); 
});

演示：http://jsfiddle.net/jJyJv/1/

來源

2014-07-07 23:27:13 Guffa

JQuery的無響應慢

回答

相關問題