質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

2349閲覧

透明であっても背景を変更する方法

aaaaaaaa

総合スコア501

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/03/17 11:04

下記のソースは、配列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(""); },

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

試してみましたが、ryls-nmm さんのおっしゃるように $.normalizeColor().toRgbaString() を使うとよいみたいです。
ただし、colors の初期値は

javascript

1 {from: 'rgba(0, 153, 51, 1)', to: 'rgba(0, 133, 44, 1)'}, 2 {from: 'rgba(230, 230, 230, 1)', to: 'rgba(191, 191, 191, 1)'}, 3 {from: 'transparent', to: 'rgba(0, 102, 51, 1)'}

と、明示的に rgba() で指定する必要があるみたいです。
あと、mouseleave のイベントハンドラ内の .animate() の終了時コールバックの中で元の背景色が透明になる場合の特別に処理するのも必要そうです。

javascript

1 if ($elem.data('baseColor') == 'rgba(0,0,0,0)') { 2 $elem.css('background-color', ''); 3 }

で一応できていますが、正しくは mouseenter イベントのハンドラ内で background-color が無指定の場合にだけ、無指定に戻す、というのがよさそうです。

あと、直接関係ないですが、$elem.data('baseColor', baseColor) と元背景色を保存しておく処理について、現在は mouseenter が発生したら必ずやっていますが、対応する色が colors に含まれているときに限定したほうがいいですね。

投稿2016/03/17 23:46

unau

総合スコア2468

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryls-nmm

2016/03/18 16:16

`toRgbaString` では rgb 表記のものはそのまま rgb になりますが 今回の用途では rgb のままでも良いと思います `rgb(0, 153, 51)` と書けば a は 1 としてアニメーションされます また元の背景色が透明な場合でも animate に指定する `backgroundColor` が rgba 形式なら特別な処理をしないでも透過度も含めてアニメーションされます `transparent` は `rgba(0,0,0,0)` になるので ``` if ($elem.data('baseColor') == '#00000000') ``` の if 文は不要です
unau

2016/03/18 22:05

Google Chrome 48.0.2564.116 m で試して必要と判断しました。 あと、if ($elem.data('baseColor') == ~) のくだりが必要なのは、mouseenter/mouseleave でアニメーションが終わったあと、再度アニメーションが行われるようにするためです。この if 文がなくてもアニメーションは行われますが、アニメーション終了後の backgorund-color が変換対象にしている colors の候補から外れてしまいます。 設計に口を出すなら変換対象にする色をリストで持っているのがイケてないと思っています。
ryls-nmm

2016/03/19 02:44

失礼しました 2回目が考慮できていませんでした if 文がないと2回目が実行できていないですね 以下質問者さん向け transparent (rgba(0,0,0,0))の場合に限りアニメーションした場合に、アニメーション前の色が rgba(128,128,128,1) だとすると アニメーション後が rgba(0,0,0,0) ではなく rgba(128,128,128,0) になっていることが原因です a が 0 でも rgba(255,0,0,0) などでは指定した通りの色になるので transparent だけ例外のようです
guest

0

jQuery の animate では #00000000 という形式は使えないようです
#000000 とみなされて黒色にアニメーションで変化します

$.normalizeColor では

javascript

1$.Color(colorSpec).toRgbaString()

の方を使って rgba(0,0,0,0) が baseColor になるようにすればうまくアニメーションされると思います

~~ については int 型キャストと思えばよいです
32ビット範囲にまとめられる・NaN にならないのが parseInt とは違うところです

投稿2016/03/17 14:43

ryls-nmm

総合スコア633

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問