Javascript 用于jquery图像交换的淡入淡出转换

我对jquery有些陌生，我有一个工作函数，可以在列表元素的悬停处交换图像。我试图添加淡出和淡出，但它不工作。图像会淡出，但无法获得新图像的正确路径。
这是工作脚本：

$(document).ready(function() {
    var path = 'images/';
    $('.menu-child').hover(function() {
        var newimage = $(this).attr('data-path') + '.jpg';
        $('.swap > img').attr('src', path + newimage)
    });
});

这就是我尝试的淡入淡出效果（还有一些变化，我都无法实现）：

HTML:

这是一个带有适当注释的示例

$(document).ready(function() {
    var path = 'images/';
    $('.menu-child').hover(function() {
        var newimage = $(this).attr('data-path') + '.jpg';
        if(newimage != (path + $('.swap > img').attr('src'))){
            /*if the current image being displayed is not the same
            as the data-path of the hovered element.
            This prevents it from running even when the image should
            not be changing
            */
            $('.swap > img').fadeOut(0);
            //first fade out the current image
            $('.swap > img').attr('src', path + newimage);
            //then change the path when it is not visible
            $('.swap > img').fadeIn(500);
            //then fade in the new image with the new path
        }
    });
});

---

我们有几件事

试试这个：

$(document).ready(function() {
  var path = 'images/';
  $('.menu-child').hover(function() {
    var newimage = $(this).attr('data-path') + '.jpg';
    $('.swap > img').fadeOut(function() {
      $(this).attr('src', path + newimage).fadeIn();
    });
  });
});

工作示例：

---

你也许可以自己弄清楚为什么它现在可以用了，但是如果你想了解更多的细节，请告诉我。

我在

fadenIn

上看到一个打字错误，大部分都是这样！你会认为Dreamweaver会为我捕捉到这一点。所以唯一的区别（除了我在“fadeIn”上愚蠢的输入错误）是使用“this”作为元素选择器？“this”不就是选择我已经选择的元素的快捷方式吗？我只是先更正了输入错误，直到我像你在这里一样使用了“this”，它才起作用。我不明白。实际上，我在第一次尝试时使用了“this”，但它不起作用（很可能是因为我没有看到输入错误），所以我使用了完整的元素名。难以置信的是，一个打字错误让我花了好几个小时才把头发扯下来！现在，它可以很好地处理这段代码了，您知道是否有办法修改它，以便在鼠标离开列表项时不会发生任何事情吗？现在它会淡出并再次出现在图像中。我想它只是离开那里的当前图像。我更新了图像的完整路径。通过将

悬停

更改为

鼠标指针

，确定了该问题。现在，如果正确的图像已经存在，我需要让它在

mouseenter

上不做任何操作。下面是修复方法：是的，我使用“this”只是选择完全相同的元素。尽可能使用“this”而不是选择器；当您使用选择器时，它会导致脚本在DOM中搜索元素（相当昂贵），而函数会免费公开“this”上下文。是的，我已经用一个类似的

if

语句对其进行了修复：

if（path+newimage！=（$（'.swap>img'）.attr（'src'））

这种方法有效，但效果不太好。奇怪的是，它两次将新图像引入。看到它在行动了吗

$(document).ready(function() {
    var path = 'images/';
    $('.menu-child').hover(function() {
        var newimage = $(this).attr('data-path') + '.jpg';
        if(newimage != (path + $('.swap > img').attr('src'))){
            /*if the current image being displayed is not the same
            as the data-path of the hovered element.
            This prevents it from running even when the image should
            not be changing
            */
            $('.swap > img').fadeOut(0);
            //first fade out the current image
            $('.swap > img').attr('src', path + newimage);
            //then change the path when it is not visible
            $('.swap > img').fadeIn(500);
            //then fade in the new image with the new path
        }
    });
});

$(document).ready(function() {
  var path = 'images/';
  $('.menu-child').hover(function() {
    var newimage = $(this).attr('data-path') + '.jpg';
    $('.swap > img').fadeOut(function() {
      $(this).attr('src', path + newimage).fadeIn();
    });
  });
});