jQuery로 색상에 애니메이션 적용하기 단계 함수 및 CSS rgb()

Question

jQuery로 간단한 너비 및 배경 색상 애니메이션을 처리하려고합니다 (apple.com의 검색 상자와 비슷 함).

기본적으로 양식 필드에 중점을두고 그 부모가 배경색을 변경하고 넓어지면 흐림 효과에서 부모의 너비와 배경색이 다시 변경됩니다.

jQuery Color 플러그인을로드하지 않으려 고합니다. 그래서 간단한 해결 방법을 찾았습니다. 문제는 배경색이 초점을 맞춰 완벽하게 움직이지만 아무 것도 흐려지지 않습니다. 어떤 도움이라도 대단히 감사하겠습니다. 여기

내 코드입니다 : (시작 배경색이 rgb(243, 243, 243) 당신이 궁금해하는 경우 그 숫자가 어디에서 오는지)

$('#s').focus(function() { 
    $('#header-search-form').animate(
     {'width': '175px'}, { 
     duration : 150, 
     easing : 'swing', 
     step  : function(now, fx) { 
      var completion = (now - fx.start)/(fx.end - fx.start); 
      $('#header-search-form').css('backgroundColor', 'rgb(' + 243+(255-243)*completion + ',' + 243+(255-243)*completion + ',' + 243+(255-243)*completion + ')'); 
     }   
    }); 
}); 
$('#s').blur(function() { 
    $('#header-search-form').animate(
     {'width': '125px'}, { 
     duration : 150, 
     easing : 'swing', 
     step  : function(now, fx) { 
      var completion = (now - fx.start)/(fx.end - fx.start);      
      $('#header-search-form').css('backgroundColor', 'rgb(' + 255-(255-243)*completion + ',' + 255-(255-243)*completion + ',' + 255-(255-243)*completion + ')');    
     }     
    }); 
}); 

Answer 1

이 숫자는 파란색 녹색 빨간색 녹색의 값과 파랑 색의 RGB (빨강,이다 이 범위는 0에서 255 사이입니다. 이므로 rgb(255,255,255)은 흰색이고 rgb(0,0,0)은 검정입니다.

 $('#s').focus(function() { 
     $('#header-search-form').animate(
    { 'width': '175px' }, { 
     duration: 150, 
     easing: 'swing', 
     step: function(now, fx) { 
      var completion = (now - fx.start)/(fx.end - fx.start); 
      $('#header-search-form').css('backgroundColor', 'rgb(' + (243 + (255 - 243) * completion) + ',' + (243 + (255 - 243) * completion) + ',' + (243 + (255 - 243) * completion) + ')'); 
     } 
    }); 
    }); 
    $('#s').blur(function() { 
     $('#header-search-form').animate(
    { 'width': '125px' }, { 
     duration: 150, 
     easing: 'swing', 
     step: function(now, fx) { 
      var completion = (now - fx.start)/(fx.end - fx.start); 
      $('#header-search-form').css('backgroundColor', 'rgb(' + (255 - (255 - 243) * completion) + ',' + (255 - (255 - 243) * completion) + ',' + (255 - (255 - 243) * completion) + ')'); 
     } 
    }); 
    }); 

Answer 2

실제로해야 할 일은 유효한 숫자가있는 변수를 만드는 것입니다. 그러면 작동합니다.

이 바이올린을 참조하십시오 : http://jsfiddle.net/2X6QL/

그것은 당신에게 당신의 계단 함수에서 반환 된 번호가 표시됩니다, 그리고 그들은 당신의 황금, 나에 번호가 보이지 않는 그런 다음에 0에서 255 사이의 RGB 번호처럼 보이는 경우 색상이 곧 바뀌고 컬러 애니메이션이 작동하지 않는 것처럼 숫자가 꺼져 있기 때문에 흰색으로 바뀝니다.

정확한 숫자를 계산하는 방법이 확실하지 않습니다. 색상을 일치시키려는 시도가 어떤 것인지 모르겠으나 계산에 숫자가 가깝습니다. math.round 또는 parseInt가 그것을 해결할 것이고, 나는 또 다른 모습을 보일 것이고 숫자를 반올림하는 것이 효과가 있을지 알아 보겠습니까?

그리고 그것은했다, 여기에 작업 바이올린입니다 : http://jsfiddle.net/2X6QL/3/

코드 : 사람이 관심

var completion, color; 
$('#s').focus(function() { 
    $('#header-search-form').animate({ 
     width: 175 
     }, { 
     duration : 1500, 
     easing : 'swing', 
     step  : function(now, fx) { 
      completion = (now - fx.start)/(fx.end - fx.start); 
      color = Math.round(243+(255-243)*completion) +', '+ Math.round(243+(255-243)*completion) +', '+ Math.round(243+(255-243)*completion); 
      $('#header-search-form').css('backgroundColor', 'rgb('+color+')'); 
     }   
    }); 
}).blur(function() { 
    $('#header-search-form').animate({ 
     width: 125 
     }, { 
     duration : 1500, 
     easing : 'swing', 
     step  : function(now, fx) { 
      completion = (now - fx.start)/(fx.end - fx.start);      
      color = Math.round(255-(255-243)*completion) + ', ' + Math.round(255-(255-243)*completion) + ', ' + Math.round(255-(255-243)*completion); 
      $('#header-search-form').css('backgroundColor', 'rgb('+color+')'); 
     }     
    }); 
});