jQuery fade цвет фона строки заголовка при прокрутке вниз

Question

Я пытаюсь затухать фон заголовка в white, но когда я пытаюсь использовать некоторый jQuery для анимации затухания цвета фона, он просто не будет Работа.

JQuery

var windw = this; 
$.fn.followTo = function (pos) { 
    var $this = this, 
     $window = $(windw); 

    $window.scroll(function(e){ 
     if ($window.scrollTop() > pos) { 
      $this.animate({'backgroundColor':'rgba(255,255,255,1)'},400); 
      console.log($this.css('backgroundColor')); 
      console.log(pos); 
     } else if ($window.scrollTop() == 0) { 
      $this.animate({'backgroundColor':'rgba(255,255,255,0)'}); 
      console.log($this.css('backgroundColor')); 
      console.log(pos + ' at the top'); 
     } else { 
      $this.animate({'backgroundColor':'rgba(255,255,255,0)'}); 
      console.log($this.css('backgroundColor')); 
     } 
    }); 
}; 

$('.home-header-main').followTo(86); 

jsFiddle Demo

Помощь ценится

Answer 1

Вы можете анимировать RGBA с помощью JQuery с помощью plugins, но я позволил бы CSS3 обрабатывать все это с помощью CSS переходы ,

Пример:

body { 
    background-color: rgba(255,255,255,1); 
    -webkit-transition: background-color 0.4s linear; 
     -moz-transition: background-color 0.4s linear; 
     -o-transition: background-color 0.4s linear; 
      transition: background-color 0.4s linear; 
} 

.bg-faded { 
    background-color: rgba(255,255,255,0); 
} 

Затем вы можете использовать Javascript для переключения класса.

Answer 2

Для того чтобы анимировать непрозрачность цвета фона, вам не нужен плагин цветовой анимации, вы можете использовать переходы CSS для более новых браузеров, но если вам нужно поддерживать браузеры, которые не поддерживают CSS3, вы можете использовать метод шаг() в одушевленных JQuery в:

$.fn.followTo = function (pos) { 
    return this.each(function() { 

     var $this = $(this), 
      $window = $(window), 
      flag = true; 

     $this[0].x = 1; 

     $window.on('scroll', function(e){ 
      if ($window.scrollTop() > pos && flag) { 
       flag = !flag 
       anim($this, 0); 
      }else if ($window.scrollTop() < pos && !flag){ 
       flag = !flag 
       anim($this, 1); 
      } 

     }); 
    }); 

    function anim(elem, val) { 
     elem.stop(true, false).animate({ 
      x : val 
     }, 
     { 
      step: function(now, fx) { 
       $(fx.elem).css({backgroundColor : 'rgba(255,255,255,'+now+')'}); 
      }, 
      duration: 4000 
     }); 
    } 
}; 

$('.home-header-main').followTo(86); 

FIDDLE