如何在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")。

而不是通過它們的ID選擇他們，如果你給所有相似的元素共同類可能是整潔，然後通過選擇：$(".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() { 
          }); 
        }); 
       });