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

如何在JQuery中使用$（this）来动画这些图像？

3 个答案: