オンマウスした要素の背景色を変える

Question

オンマウスしたhtml要素の背景色を簡単なアニメーション付きで変更するソースなのですが、ソースの特性上、背景色が増えるごとに
ソースが冗長になってしまいます。今のところ、変更したいhtml要素の背景色が、緑(#093)と灰色(#ccc)だけなのですが、
色が増えていくごとに冗長になっていくこのソースに改善点はありますか。

	//配列で指定した各々の要素の背景色を取得し、オンマウス時のアニメーションを追加する。
	var animation_el = [
	    '#gnavi li a', 
		'#language li a',
		'#gnavi_contents p a:not(.gnavi_contents_title)'
	]
   //変更する前の背景色をいれる変数
	var color;
	$.each(animation_el, function(index,value) {
        $(value).on({
           	'mouseenter':function() {
				color = $(this).css('background-color');
				var ex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\)/;
				var result = color.match(ex);

				//●緑色の場合。rgb(0. 153, 51),#093
				if(result[1] == 0 && result[2] == 153 && result[3] == 51) {
				    result[2] = result[2] - 20;
				    result[3] = result[3] - 7;
				    var enter_color = 'rgb('+result[1]+','+result[2]+','+result[3]+')';
				//●灰色の場合。rgb(204, 204, 204),#ccc
				} else if(result[1] == 204 && result[2] == 204 && result[3] == 204) {
				    result[1] = result[1] - 39;
				    result[2] = result[2] - 39;
				    result[3] = result[3] - 39;
				    var enter_color = 'rgb('+result[1]+','+result[2]+','+result[3]+')';
				}
				
			        $(this).animate({'background-color': enter_color}, 400);
            },
		        'mouseleave':function() {
			        $(this).animate({'background-color': color}, 400);
		    }
	    });//on
	});

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11152633331

Answer 1

試してないんですが、これで動くんじゃないでしょうか。
colors変数の中身を増やせば何色でも対応かのうですよ。

あと、元のコードだとアニメーション中にマウスオーバーを素早く繰り返すと、動かなくなっちゃうんじゃないかなぁ（途中の色で固まっちゃう）

   //var color; //いらない
    var colors = [
            {from:"rgb(0. 153, 51)"      , to"rgb(0, 133, 44)"},  
            {from:"rgb(204, 204, 204)", to"rgb(165, 165, 165)"}, 
    ];
    $.each(animation_el, function(index,value) {
        //初期色を保存
        value.baseColor = $(value).css('background-color');

        $(value).on({
               'mouseenter':function() {
                     for(var i=0; i<colors.length; i++){
                           if(colors[i].from == this.baseColor){
                                   $(this).animate({'background-color': colors[i].to}, 400);
                                   break;
                           }
                     }
            },
            'mouseleave':function() {
                    $(this).animate({'background-color': this.baseColor}, 400);
            }
        });//on
    });

Comments

[aaaaaaaa]

ご回答有難うございました。
baseColor変数の部分をコンソールで確認するとエラーがでてしまい処理が実行されない問題で躓いてしまったのですが、局所変数から大域変数にすることで解決しました。