如何在JQuery中使用$（this）為這些圖像設置動畫？

Question

我有三個縮略圖。 當用戶將鼠標移到它們上面時，我不會將它們從部分不透明褪色到完全不透明，而當他們的鼠標不再位於它們上面時，我將再次使其褪色。 我的代碼工作正常，但是為每個圖像重新鍵入所有這些代碼似乎很多余。 我如何才能更有效地做到這一點？ 似乎可以使用$（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 () {
                           });
                     });
              });
;

Answer 1

您的代碼可以通過以下方式完全重寫和縮短：

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

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

Answer 2

只需使用選擇器即可選擇所有三個元素：

          $(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")來重新選擇元素。

如果您給所有相似的元素都提供一個通用類，然后再通過以下方式進行選擇，則可能不是很整齊，而是選擇它們： $(".someClass").mouseover(...

還要注意，沒有必要為.mouseover()提供一個空的回調函數-如果您不想在淡入淡出時完成任何操作，則可以忽略最后一個參數。

Answer 3

這應該工作...

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 () {
                           });
                     });
              });