Jquery animate div opacity на прокрутке

Question

Итак, я пытаюсь анимировать свойство css, основанное на прокрутке окна браузера. приведенный ниже код работает, но я бы хотел, чтобы у него был переход, а не просто внезапный щелчок от непрозрачности 1 до непрозрачности 0,5. любая помощь приветствуется. заранее спасибо.

$(document).ready(function(){ 
$(window).scroll(function(){ 
    if ($(window).scrollTop() > 50){ 
     $('.header').css('background','rgba(200, 54, 54, 0.5)'); 
    } 
    else if ($(window).scrollTop() < 50){ 
     $('.header').css('background','rgba(200, 54, 54, 1)'); 
    } 
}); 

});

Вот jsfiddle ссылка на код до сих пор

Answer 1

вы можете сделать

$(window).scroll(function(){ 
    if ($(window).scrollTop() > 50){ 
     $('.header').css('background','rgb(200, 54, 54)').stop().animate({"opacity":".5"},1000) 
    } 
    else if ($(window).scrollTop() < 50){ 
     $('.header').css('background','rgb(200, 54, 54)').stop().animate({"opacity":"1"},1000) 
    } 
});  

http://jsfiddle.net/XXjZW/2/

Answer 2

Вы можете использовать свойство CSS3 transition:

.header{ 
    -webkit-transition:background 1s; 
    -moz-transition:background 1s; 
    -o-transition:background 1s; 
    transition:background 1s; 
} 

Answer 3

дайте свой css переход ->

transition:background 1s; 

http://jsfiddle.net/XXjZW/6/

Answer 4

Если вы хотите совместимость с браузерами, которые не Suppor CSS3, я бы порекомендовал вам использовать библиотеки JQuery UI:

$('.header').animate({ 
     backgroundColor: "#aa0000" 
    }, 1000); 

Живой пример: http://jsfiddle.net/XXjZW/8/

Вам нужно будет включить его, когда вы включаете библиотеку jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>