如何在jQuery的animate（）執行前停止屏幕閃爍

我注意到在我的滾動到頂部動畫發生之前，屏幕閃爍。
這可以住在可以看到：http://www.dreamtheater.co.il 如何在jQuery的animate（）執行前停止屏幕閃爍

要重新創建：

向下滾動，直到菜單欄僅保留在頂部
點擊最右邊的鏈接，從菜單中

HTML的正文如下：<body id="top">。
和JavaScript（在最底層相關的代碼）：

$(function() { 
    var stickyHeader = $('#menubar').offset().top; 

    $(window).scroll(function() { 
     if ($(window).scrollTop() > stickyHeader) { 
      ... 
      ... 
      $("a[href='http://www.dreamtheater.co.il/index/']").attr('href', '#top'); 
     } else { 
      ... 
      ... 
      $("a[href='#top']").attr('href', 'http://www.dreamtheater.co.il/index/'); 
     } 
    }); 

    $('#top').on("click",function() { 
     $('body,html').animate({ scrollTop: 0 }, 'slow') 
    }); 
});

來源

2013-10-04 Idan Adar

是它僅適用於Chrome（基於在標籤上），還是在其他瀏覽器？什麼OS？ – ajp15243

你可以通過一個網址或jsfiddle？ –

@ ajp15243，迄今爲止我只在Chrome中進行了測試，也許這個標記是過早的... OS是OS X. –

好吧，看來問題是兩折：

我指着<body id="top">而不是在href，這也是我上動態滾動改變
沒有'發佈'事件

現在工程進展順利，無閃爍，像這樣：

$("#menubar").on("click", "#menu a[href='#top']", function(){ 
    $('body,html').animate({ scrollTop: 0 }, 'slow'); 
    return false; 
});

來源

2013-10-05 06:19:54

'return false'！大！ – Beterraba

那麼從我的理解。重新計算元素的大小和位置是個問題。

我建議你把#menu作爲position：absolute而不是position：static。因此，當你改變你的菜單位置css，從絕對到固定，瀏覽器不需要重新計算其他元素的位置和大小，因爲這兩個位置（絕對和固定）在其他元素上飛行，不要再影響「phisically」

來源

2013-10-04 13:34:17

謝謝，但是這並沒有使閃爍消失，並且也破壞了默認的菜單位置。 –

是的，您需要使用css將菜單定位在正確的位置。但奇怪的是，它應該起作用。 –

我認爲，這與該事件變量變體與清潔：

$("#menubar").on("click", "#menu a[href='#top']", function(e){ 
    e.preventDefault(); 
    $('body,html').animate({ scrollTop: 0 }, 'slow'); 
});

來源

2014-02-28 17:16:30

如何在jQuery的animate（）執行前停止屏幕閃爍

回答

相關問題