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+')' );
        }                   
    });
});

使用jQuery Step Function和CSS rgb（）动画颜色

2 个答案: