jquery 图像交换的淡入淡出过渡

Question

我对 jquery 有点陌生，我有这个工作功能可以在悬停列表元素时交换图像。我正在尝试添加 fadeOut 和 fadeIn 但它不起作用。图像淡出，但未获得新图像的正确路径。
这是工作脚本：

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

这是我尝试的淡入淡出效果（以及一些变体，none 我可以开始工作）：

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

HTML:

<section class="submenuWrapper">
    <ul class="twinsub">
        <li class="twinmultisub twinleft">
             <ul>
                  <li class="menu-child" data-path="menu-interior"><a href="#"><span>Interior Painting</span></a></li>
                  <li class="menu-child" data-path="menu-exterior"><a href="#"><span>Exterior Painting</span></a></li>
             </ul>
        </li>
        <li class="twinmultisub twinimg">
             <section class="swap">
                 <img src="images/menu-exterior.jpg" />
             </section>
        </li>   
    </ul>
</section>

Answer 1

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

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

Answer 2

我们有几件事。

试试这个：

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

工作示例：https://jsfiddle.net/sabrick/fudLgqxs/3/

您现在可能能够自己弄清楚为什么它可以工作，但如果您需要任何其他详细信息，请告诉我。

jquery 图像交换的淡入淡出过渡

Fade transition for jquery image swap

javascript

jquery

attributes