jQuery動畫只執行一次

我有一個jQuery函數，當我滾動時，我的菜單從position: relative到fixed。jQuery動畫只執行一次

$(function() { 
    var navheight = $('.nav-cont').innerHeight() 
    var topTrigger = $('.navbar').offset().top; 

    $(document).scroll(function() { 
     if ($(this).scrollTop() >= topTrigger + navheight) { 
      $('.navbar').addClass('affixed'); 
      $('.navbar').animate({'top':'0px'}, 1000); 
      $('html').css('margin-top',navheight) 
     } 

     if ($(this).scrollTop() < topTrigger) { 
      fixed = false; 
      $('.navbar').removeClass('affixed'); 
      $('html').css('margin-top','0px') 
     } 
    }); 
});

這裏的類的屬性：

.affixed { 
    position: fixed; 
    z-index: 99; 
    width: 100%; 
    top: -80px; 
    -webkit-box-shadow: 3px -1px 45px 0px rgba(0,0,0,0.65); 
    -moz-box-shadow: 3px -1px 45px 0px rgba(0,0,0,0.65); 
    box-shadow: 3px -1px 45px 0px rgba(0,0,0,0.65); 
}

我所做的這一切，因爲你可以看到，菜單，當成爲fixed有陰影，如果我沒有把它的值固定爲-80，然後用動畫在頁面上調用它，視覺效果不會那麼好，而且很機器人。我希望你明白我的意思。

現在，當我第一次向下和向後滾動時，這一切都有效，但第二次，我的函數中動畫行的持續時間似乎不再有效。它確實把我的菜單放在top:0px，但是持續時間被忽略。

這是爲什麼，我該如何解決這個問題？

來源

2015-04-15 Tommy D

您必須再次刪除內聯樣式「top：0px」。否則，當第二次向下滾動時，內聯樣式「top：0px」將覆蓋來自css類的「top：-80px」並立即應用。動畫也會發生，但會將當前值（= 0）的頂部屬性動畫爲0，因此不會發生可見變化。

$('.navbar').css({'top': ''});

看到這個小提琴：http://jsfiddle.net/y86L0hku/3/

來源

2015-04-15 09:41:55 Capricorn

jQuery動畫只執行一次

回答

相關問題