动画颜色与jQuery步进函数和CSS rgb()

Question

我正在尝试用jQuery做一个简单的宽度和背景颜色动画(类似于apple.com的搜索框)。

基本上，你聚焦一个表单字段，它的父字段改变背景颜色，变得更宽，然后，在模糊，父字段的宽度和背景颜色变回来。

我不想为这么简单的事情加载jQuery颜色插件，所以我找到了一个工作。问题是，背景颜色在对焦时非常生动，但在模糊时没有任何变化。如有任何帮助，我将不胜感激。

这是我的代码:(开始的背景颜色是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数字，那么你的黄金，对我来说，数字看起来不会很快改变颜色，颜色动画对我来说不工作，它变成白色，因为数字是关闭的。

我不确定如何准确地为你计算数字，因为我不知道你想要匹配什么颜色，但我看到你在计算中接近一些数字，也许是数学。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+')' );
        }                   
    });
});