オンマウスしたhtml要素の背景色を簡単なアニメーション付きで変更するソースなのですが、ソースの特性上、背景色が増えるごとに
ソースが冗長になってしまいます。今のところ、変更したいhtml要素の背景色が、緑(#093)と灰色(#ccc)だけなのですが、
色が増えていくごとに冗長になっていくこのソースに改善点はありますか。
javascript
1 //配列で指定した各々の要素の背景色を取得し、オンマウス時のアニメーションを追加する。 2 var animation_el = [ 3 '#gnavi li a', 4 '#language li a', 5 '#gnavi_contents p a:not(.gnavi_contents_title)' 6 ] 7 //変更する前の背景色をいれる変数 8 var color; 9 $.each(animation_el, function(index,value) { 10 $(value).on({ 11 'mouseenter':function() { 12 color = $(this).css('background-color'); 13 var ex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\)/; 14 var result = color.match(ex); 15 16 //●緑色の場合。rgb(0. 153, 51),#093 17 if(result[1] == 0 && result[2] == 153 && result[3] == 51) { 18 result[2] = result[2] - 20; 19 result[3] = result[3] - 7; 20 var enter_color = 'rgb('+result[1]+','+result[2]+','+result[3]+')'; 21 //●灰色の場合。rgb(204, 204, 204),#ccc 22 } else if(result[1] == 204 && result[2] == 204 && result[3] == 204) { 23 result[1] = result[1] - 39; 24 result[2] = result[2] - 39; 25 result[3] = result[3] - 39; 26 var enter_color = 'rgb('+result[1]+','+result[2]+','+result[3]+')'; 27 } 28 29 $(this).animate({'background-color': enter_color}, 400); 30 }, 31 'mouseleave':function() { 32 $(this).animate({'background-color': color}, 400); 33 } 34 });//on 35 }); 36
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11152633331
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/11/17 10:43