下記のソースは、配列animation_elで指定したhtml要素がオンマウスされたらアニメーションを伴ったうえで背景色を変更しマウスが離れたら元々の背景色に戻す処理で、jquer.colorを利用しております。
しかし、元々の背景色がtransparentだと、処理が上手くいきません。mouseleaveする際、一瞬背景色が黒くなってしまいます。
cssメソッドで、背景色が黒色になったら、trandparentにする処理も書いてあるのですが上手くいかないようです。
どうすれば、下記のソースでtransparentでも背景色が変更できるようになりますか。
javascript
1$.normalizeColor = function(colorSpec) { 2 var to = false ? $.Color(colorSpec).toRgbaString() : $.Color(colorSpec).toHexString(true); 3 //console.log('@@@' + colorSpec + '==>' + to); 4 console.log('●colorSpecとは:',colorSpec,'\n●toとは:',to); 5 return to; 6}; 7 8var animation_el = [ 9 '#gnavi li a', 10 '#language li a', 11 '.gnavi_contents p a', 12 '#katugyoArea p' 13 ]; 14 var colors = (function(colors, ret) { 15 colors.forEach(function(spec) { 16 ret.push({ from: $.normalizeColor(spec.from), to: $.normalizeColor(spec.to) }) 17 }); 18 return ret; 19 20 })([ 21 {from: 'rgb(0, 153, 51)', to: 'rgb(0, 133, 44)'}, 22 {from: 'rgb(230, 230, 230)', to: 'rgb(191, 191, 191)'}, 23 {from: 'transparent', to: 'rgb(0, 102, 51)'} 24 ], []); 25 26 $.each(animation_el, function(index,value) { 27 $(value).on({ 28 'mouseenter':function() { 29 var $elem = $(this);//オンマウスされた要素 30 var baseColor = $.normalizeColor($elem.css('background-color')); 31 $elem.data('baseColor', baseColor); 32 for(var i = 0; i<colors.length; i++) { 33 if(colors[i].from == baseColor) { 34 $elem.animate({'background-color': colors[i].to }, 400, 35 function() { 1; } 36 ); 37 console.log('colors',colors[i].to) 38 break; 39 } 40 } 41 }, 42 'mouseleave':function() { 43 var $elem = $(this);//オンマウスされた要素 44 console.log('$elem:',$elem); 45 $elem.animate({'background-color': $elem.data('baseColor')}, 400, function() { 46 if ($elem.data('baseColor') == '#00000000') { 47 console.log('アニメーション終了後',$elem.data('baseColor'),'$elemとは:',$elem); 48 $elem.css('background-color', 'transparent'); 49 } 50 $elem.removeData('baseColor'); 51 }); 52 } 53 });//on 54 });
jquery.color
toRgbaString: function() { var prefix = "rgba(", rgba = jQuery.map( this._rgba, function( v, i ) { return v == null ? ( i > 2 ? 1 : 0 ) : v; }); if ( rgba[ 3 ] === 1 ) { rgba.pop(); prefix = "rgb("; } return prefix + rgba.join() + ")"; }, toHslaString: function() { var prefix = "hsla(", hsla = jQuery.map( this.hsla(), function( v, i ) { if ( v == null ) { v = i > 2 ? 1 : 0; } // catch 1 and 2 if ( i && i < 3 ) { v = Math.round( v * 100 ) + "%"; } return v; }); if ( hsla[ 3 ] === 1 ) { hsla.pop(); prefix = "hsl("; } return prefix + hsla.join() + ")"; }, toHexString: function( includeAlpha ) { var rgba = this._rgba.slice(), alpha = rgba.pop(); console.log('●thisとは:',this,'\n●this._rgbaとは:',this._rgba,'\n●rgbaとは:',rgba,'\n●alphaとは:',alpha); if ( includeAlpha ) { //配列、連想配列の末尾に引数内の値を追加。前にも見たが引数内の「~~」とは何なのだろうか? rgba.push( ~~( alpha * 255 ) ); } //配列或いは連想配列の値を加工する。 return "#" + jQuery.map( rgba, function( v ) { // default to 0 when nulls exist v = ( v || 0 ).toString( 16 ); return v.length === 1 ? "0" + v : v; }).join(""); },
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/03/18 16:16
2016/03/18 22:05
2016/03/19 02:44