jquery - 使用 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

这些数字是 Red Green 和 Blue 颜色 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) + ')');
        }
    });
    });