JQUERY - アニメーションnaviagtion背景色

Question

アニメーションでナビゲーション背景色を変更しようとしていますが、動作しません。

私は現在、次のコードを得た：上述のように

//NAV 
 

 
    $(document).ready(function(){ 
 
     $(window).scroll(function() { 
 
     if ($(document).scrollTop() > 50) { 
 
      $("#posnav").animate({ 
 
      backgroundColor: "#aa0000" 
 
     }, 1000); 
 
     } else { 
 
      $("#posnav").animate({ 
 
      backgroundColor: "#transparant" 
 
     }, 1000); 
 
     } 
 
     }); 
 
    });

Answer 1

を、jQueryの.animate（）のみ高、例えば幅として数値特性で動作し、マージンはですが、カラーではありません。この場合、プラグインが必要です。参照：http://api.jquery.com/animate/

ただし、CSSトランジションプロパティを使用して同様の効果を得ることができます。

// CSS 

#posnav { 
    background-color: transparent; 
    transition: background-color 0.5s ease; 
} 
#posnav.scrolled { 
    background-color: #aa0000; 
} 

// JS: 

$(document).ready(function(){ 
    $(window).scroll(function() { 
    if ($(document).scrollTop() > 50) { 
     $('#posnav').addClass('scrolled'); 
    } else { 
     $('#posnav').removeClass('scrolled'); 
    } 
    }); 
}); 

詳細については、https://css-tricks.com/almanac/properties/t/transitionを参照してください。

PS。あなたのCSSコードにはタイプミスが含まれています。それはの透明な（poundsignなし、 'e'の綴りなし）でなければなりません。