0

サムネイルが 3 つあります。ユーザーがマウスをそれらの上に移動すると、部分的な不透明度から完全な不透明度にフェードしたり、マウスがそれらの上になくなったときに再びフェードしたりしたくありません。正常に動作するこのコードがありますが、画像ごとにこのコードをすべて再入力するのは冗長なようです。どうすればこれをより効率的に行うことができますか? $(this) の使用が機能するように見えますが、それほど遠くありません。私は何が欠けていますか？

function imgFade()
{
$('#cluster').fadeTo(0,.3);
$('#launch').fadeTo(0,.3);
$('#gas').fadeTo(0,.3);

}
              $(document).ready(function () {
                     $("#cluster").mouseover(function () {
                           $("#cluster").fadeTo("slow", 1, function () {
                           });
                     });
                     $("#cluster").mouseout(function () {
                           $("#cluster").fadeTo("slow", .3, function () {
                           });
                     });
              });
;
4

3 に答える 3

0

コードは次のように完全に書き直して短縮できます。

function imgFade() {
    $('#cluster, #launch, #gas').fadeTo(0, .3);
}

$(document).ready(function () {
    $("#cluster")
       .mouseover(function () {
          $(this).fadeTo("slow", 1);
       })
       .mouseout(function () {
          $(this).fadeTo("slow", .3);
       });
});
于 2013-10-26T01:06:08.170 に答える
0

3 つの要素すべてを選択するセレクターを使用するだけです。

          $(document).ready(function () {
                 $("#cluster, #launch, #gas").fadeTo(0, .3).mouseover(function () {
                       $(this).fadeTo("slow", 1);
                 }).mouseout(function () {
                       $(this).fadeTo("slow", .3);
                 });
          });

...そして、ハンドラー内でthis現在の要素を参照します。

.mouseover().mouseout()を個別に呼び出して要素を再選択するのではなく、関数を連鎖できることに注意してください$("#cluster, #launch, #gas")。

ID でそれらを選択するよりも、類似したすべての要素に共通のクラスを与えて、それによって選択した方が整然としている可能性があります。$(".someClass").mouseover(...

また、空のコールバック関数を提供しても意味がないことに注意してください.mouseover()。フェードが完了したときに何もしたくない場合は、最後の引数を省略できます。

于 2013-10-26T01:06:55.290 に答える
0

これはうまくいくはずです...

function imgFade()
{
    $('#cluster, #launch, #gas').fadeTo(0,.3);

}
              $(document).ready(function () {
                     $("#cluster, #launch, #gas").mouseover(function () {
                           $(this).fadeTo("slow", 1, function () {
                           });
                     });
                     $("#cluster, #launch, #gas").mouseout(function () {
                           $(this).fadeTo("slow", .3, function () {
                           });
                     });
              });
于 2013-10-26T01:16:01.220 に答える