
こんにちは、javascriptにてボタンを押すと画像が透明度が下がる動きを作っています。
ボタンを押すとフェードアウトはできるのですが、フェードアウトした画像を
元の透明度にフェードインすることが出来ません。
if文のclassに書かれている変数の扱いがよくわからないので、質問させて頂きました。
forで回してカウントから取得してみようかと,すべての画像に<p class="fade1">のような
タグをすべての画像に付けて、javascript記述できればと思っていましたが、classの指定が
$(".fade+i img")等と指定してみましたが、動きませんでした。
適切な方法がありましたら、教えてください。よろしくお願いします。
【html】
<div class="thumbnail">
<img src="g_images/IMG_1470.jpg" alt="画像1" class="item-image" hspace="5" vspace="3" />
<img src="g_images/DSC02564.JPG" alt="画像2" class="item-image" hspace="5" vspace="3" />
<img src="g_images/DSC02227.JPG" alt="画像3" class="item-image" hspace="5" vspace="3" />
<img src="g_images/DSC02555.JPG" alt="画像4" class="item-image" hspace="5" vspace="3" />
<img src="g_images/DSC02558.JPG" alt="画像5" class="item-image" hspace="5" vspace="3" />
</div>
【javascript】
$(document).ready(
function(){
$(".thumbnail img").click(function(){
if($(".thumbnail img").css("opacity")!=1.0){
$(".thumbnail img").fadeTo("normal", 1.0); // マウスオーバーで透明度を60%にする
}
$(this).fadeTo("normal", 0.4); // マウスオーバーで透明度を60%にする
});
});
No.2ベストアンサー
- 回答日時:
#1です。
多少(?)無駄はあるけどより単純な方法で。
<script type="text/javascript">
$(function(){
$(".thumbnail img").click(function(){
$(".thumbnail img").each(function(){
if($(this).css("opacity")!=1.0)
$(this).fadeTo("normal", 1.0);
});
$(this).fadeTo("normal", 0.4);
});
});
</script>
おお、動きました!ありがとうございます!javascriptの記述はまだ不慣れなものでして
助かりました。ちなみに、eachってちょっと調べてみましたが、each(.thumbnail内のにあるすべてのimgを対象)として繰り返しif文でフェードの状態を確認しているのですね。
普段perlをよく書いているので、書き方が大分違うことがわかり非常に参考になりました。
ありがとうございました!
No.1
- 回答日時:
ボタンが見当たらないんだけど・・・画像をクリックするたびに透明<>半透明を切り替えるって事でいいのかな?
<script type="text/javascript">
$(function(){
$(".thumbnail img").click(function(){
if($(this).css("opacity")!=1.0){//opacityが1.0じゃなければ
$(this).fadeTo("normal", 1.0);//opacityを1.0に戻す
} else {
$(this).fadeTo("normal", 0.4);//opacityを0.4にする
}
});
});
</script>
この回答への補足
回答ありがとうございます。
はい、steel_grayさんのおっしゃるとおり、ボタンではなく、画像でした。
表現悪く失礼しました。
実装してみたところ、対象の画像をもう一度押さないと元の透明度に戻らないようです。
こちらも表現が悪かったようです。
動きとしては、「画像(1)」を押下し、フェードアウトします。「画像(2)」を押すと、
「画像(1)」が元の透明度にフェードインし、「画像(2)」がフェードアウトする動きです。
何度もすみませんが、わかるようでしたらご教授をお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
libjpegライブラリの使い方につ...
-
外部javascriptの重複を防ぐには
-
外部ファイルにしたら文字化け...
-
HTMLからimgのsrcのみを正規表...
-
セグメンテーション違反なって...
-
error LNK2019 未解決のシンボ...
-
MAX関数を使ってからLEFT JOIN...
-
jQueryでクリックされた要素のi...
-
Slick.jsのオプションrtlについて
-
Javascriptで指定した日付と時...
-
jspでcssが読み込めない
-
JQuery UIで、表示したタブの中...
-
【CSS】floatで左右に並べた...
-
[JavaScript]IE11にてフリック...
-
clear: bothの事で質問です。
-
オンマウスで流れる文字
-
jQueryの.text()関数でiframe
-
getElementByIdの戻り値がnull...
-
javascriptテキストBOX色を元に...
-
交互に入れ替わる画像を複数配置
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
画像が表示でnull; this.src
-
javascriptでのパスについて
-
pythonの構文の基本事項について
-
MFCで画像を表示させているので...
-
pythonのpygameでキャラクター...
-
Vb.net2005での画像の合成方法
-
nodejsの画像表示は特別なこと...
-
セグメンテーション違反なって...
-
HTMLからimgのsrcのみを正規表...
-
error LNK2019 未解決のシンボ...
-
エクセル スクレイピングについて
-
ラズパイでno module named zbar
-
jQuery 複数のfind()
-
OpenCV での画素値の比較について
-
外部javascriptの重複を防ぐには
-
jqueryのimgpreviewというプラ...
-
jQueryで画像がちゃんとプリロ...
-
imageクラスからiconクラスに変...
-
html内にスライドショーを複数設置
おすすめ情報