使用jQuery Step Function和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+')' );
        }                   
    });
});