アニメーション（jQuery）背景色がスクロール機能で動作しない

Question

スクロール機能とアニメーション（）を使用して背景色メニューを円滑に移行しようとしています。しかし、それは動作していませんが、幅を変更するような他のプロパティは機能します...今のところ、私はcssメソッドを使用していますが、目標は「フェード・イン・アンド・アウト」効果...誰かが間違っていると教えてくれますか？

JS：

$(window).scroll(function() { 
    var top = $(window).scrollTop(); 

    if (top > 0) { 
     //this line works 
     $('.menu').css('opacity','0.7').css('background-color','#383737'); 

     //but not this one: 

    $('.menu').animate({"background-color":"#383737"}, 1000); 


    } 
}) 

CSS：

.menu{ 
    top:0; 
    width: 100%; 
    font-size: 4vw; 
    text-align: center; 
    background-color: #ED1847; 
    z-index: 1; 
    color:black; 
    position:fixed; 
} 

Answer 1

ソリューションはcss3あるコード私が検索した、他のソリューションは、（...でもホバー機能付き）は動作しません。 transitionを使用して、addClassとremoveClassを使って背景色を滑らかにして、jqueryでcssクラスを切り替えることができます。

$(window).scroll(function() { 
    var top = $(window).scrollTop(); 
    if (top > 0) { 
$('.menu').addClass('newColor'); 
    } else { 
$('.menu').removeClass('newColor'); 
    } 
}); 

JSFiddle

あなたがしたい場合は、jquery uiライブラリを含めるとanimate作業を行うことができます。

$(window).scroll(function() { 
    var top = $(window).scrollTop(); 

    if (top > 0) { 
$('.menu').stop(true, true).animate({ 
     backgroundColor: '#ED1847' 
    }) 
    } else { 
$('.menu').stop(true, true).animate({ 
     backgroundColor: '#383737' 
    }) 
    } 
}); 

JSFiddle

Answer 2

アニメーションプロパティとすべてのアニメーション化されたプロパティは、以下に示すよう除き、単一の数値、 にアニメ化されなければならない

値。数字以外のほとんどのプロパティは、 jQuery.Colorプラグインが使用されていない限り、基本的なjQuery機能（たとえば、幅、 の高さ、または左にアニメーションできますが、背景色にすることはできません）を使用してアニメーション化することはできません。

$('.menu').animate({backgroundColor:"#383737"}, 1000);