javascript - 如何在 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 () {
                           });
                     });
              });