jQuery動畫進去，但不回去

Question

我試圖讓一個標誌出現在導航欄中，當你滾動它，它固定到頁面的頂部，它似乎工作正常，但嘗試扭轉動畫，它表現奇怪。

$(document).ready(function() { 
    $(document).scroll(function() { 
     var scroll = $(this).scrollTop(); 
     if (scroll > 174) { 
      $('#navbar').css({"position":"fixed","top":"0","margin-top":"0"}); 
      $('section').css({"margin-top":"48px"}); 
      $('#logo_navbar').animate({"opacity": "1","width": "114px"}, 200); 
     } else { 
      $('#navbar').css({"position":"relative","margin-top":"-4px"}); 
      $('section').css({"margin-top":"0"}); 
      $('#logo_navbar').css({"opacity": "0","width": "0px"}); 
     } 
    }); 
}); 

（問題在於#logo_navbar動畫）。

這裏有一個演示： JSFiddle

Answer 1

它的行爲古怪？你是什​​麼意思？我相信你指徽標隱藏得太快，如果是這樣的話，那麼你的問題是，你是不是在你的else語句執行的動畫，應該如下：

$(document).ready(function() { 
    $(document).scroll(function() { 
     var scroll = $(this).scrollTop(); 
     if (scroll > 174) { 
      $('#navbar').css({ 
       "position": "fixed", 
       "top": "0", 
       "margin-top": "0" 
      }); 
      $('section').css({ 
       "margin-top": "48px" 
      }); 
      $('#logo_navbar').animate({ 
       "opacity": "1", 
       "width": "114px" 
      }, 200); 
     } else { 
      $('#navbar').css({ 
       "position": "relative", 
       "margin-top": "-4px" 
      }); 
      $('section').css({ 
       "margin-top": "0" 
      }); 
      $('#logo_navbar').stop().animate({ 
       "opacity": "0", 
       "width": "0px" 
      }, 200); 
     } 
    }); 
}); 

http://jsfiddle.net/6nkgcqbf/1/