こんにちは、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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MFCで画像を表示させているので...
-
HPにスライドショーが反映され...
-
OpenCV での画素値の比較について
-
複数の画像をフェードイン・ア...
-
外部ファイルにしたら文字化け...
-
JavaScriptで変更した属性の元...
-
Jquery load IEだと効かない?
-
こんにちは、javascriptにてボ...
-
色の変更
-
MAX関数を使ってからLEFT JOIN...
-
読み込んだQRコードをフォーム...
-
jQueryスライドショー画像への...
-
textareaに画像を表示したい
-
JSPでの画像ファイル表示
-
どの<li><a> が押されたか判別...
-
textareaで入力した文字を改行...
-
clear機能を失わずにファイルア...
-
小窓について教えて下さい。
-
画像の下に説明文をつけて切り...
-
HTMLタグに複数のクラスを設定...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
MFCで画像を表示させているので...
-
画像が表示でnull; this.src
-
error LNK2019 未解決のシンボ...
-
Vb.net2005での画像の合成方法
-
onclickで画面が固まる・・・ら...
-
リンク先を動的に変更する
-
(javascript)HTMLで指定した...
-
【OpenCV】二値画像後、白の部...
-
jQuery 複数のfind()
-
ラズパイでno module named zbar
-
外部javascriptの重複を防ぐには
-
条件分岐でキーが入力されてい...
-
かぶらないランダム画像
-
HTMLからimgのsrcのみを正規表...
-
pythonで、tkinterとpillowの組...
-
OpenCV での画素値の比較について
-
imgボタンにfocusの当て方
-
指定したフォルダの画像を一括...
-
OpenCVでサンプルコードを使う...
おすすめ情報