Как анимировать панель навигации с jQuery

Question

Я создаю навигационную панель, чтобы увидеть мою скрипку: https://jsfiddle.net/dfbwp71u/ , когда я использую css(), она работает нормально, но когда я использую animate(), это не дает мне результата.

мой HTML:

<nav class="navigation navbar-fixed-top"> 

    </nav> 

JQuery:

$(window).scroll(function(){ 
// these conditional statements are working fine 
if($(window).scrollTop() > 5) 
{ 
    $('.navigation').css({ 
    'background-color':'#000' 
    }); 
} 
else 
{ 
    $('.navigation').css({ 
    'background-color':'#eee' 
    }); 
} 

}); 

Когда я заменить .css() на animate() он перестает давать мне результат.

// ??? 
    $('.navigation').animate({ 
    'background-color':'#000' 
    }); 

Answer 1

Ну вам не нужно animate для этого, если вы не удовлетворены csstransition

DEMO

Что бы я сделать, это просто добавить class называется fixed и назначить background-color: #000, как показано ниже:

.fixed{ 
    background-color:#000 
} 

, а затем я переключать это class исходя из условия, как показано ниже:

$(window).scroll(function(){ 
    if($(window).scrollTop() > 5) 
    { 
    $('.navigation').addClass('fixed'); 
    } 
    else 
    { 
    $('.navigation').removeClass('fixed'); 
    } 
}); 

Главное, нам нужно добавить здесь является transition свойство .navigation и он будет заботиться о покое:

.navigation 
{ 
    min-height:100px; 
    max-width:100%; 
    background-color:#eee; 
    transition: background 500ms;//change time accordingly 
} 

Answer 2

Согласно

Все анимированные свойства должны быть анимированы до одного числового значения, , за исключением случаев, указанных ниже; большинство свойств, которые нечисловая не могут быть анимированные, используя базовую функциональность JQuery (например, ширина, высота, или влево можно анимировать, но цвет фона не может быть, если не используется плагин jQuery.Color)

так либо использовать JQuery-UI или jQuery.Color плагин

Answer 3

Добавить Jquery UI, если вы не добавить и изменить CSS имя свойства 'цвет фона' до 'BackgroundColor',

$(window).scroll(function(){ 
if($(window).scrollTop() > 5) 
{ 
    $('.navigation').animate({backgroundColor:'#eee'}); 
} 
else 
{ 
    $('.navigation').animate({backgroundColor:'#000'}); 
} 
});