使用 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(red, green, blue) 这个范围在 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/

它将向您显示在您的 step 函数中返回的数字，如果它们看起来像 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+')' );
        }                   
    });
});