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/

jQuery 动画进入但不返回

jQuery animation goes in but doesn't go back

jquery

animation

navbar