Javascript 如何将jquery淡入淡出更改为交叉淡入淡出？

好的，我在一个页面上有两个图像，我想在鼠标悬停和鼠标悬停之间进行交叉淡入淡出，我希望它反转，使图像看起来好像恢复到原始状态

现在，我已经通过淡出第一张图像，然后淡出替换图像来工作，如下所示。我如何使交叉淡出如上所示

$("#img-swap1 img").mouseover(function() {
      $("#img-swap1 img").fadeOut(350, function() { 
        $(this).attr("src", "images/dentalwise-hover.jpg","images/dentalwise.jpg"); 
        $(this).fadeIn(350);    
      });
    }).mouseout(function(){
        $("#img-swap1 img").fadeOut(350, function() { 
        $(this).attr("src", "images/dentalwise.jpg","images/dentalwise.jpg"); 
        $(this).fadeIn(350);    
        });    
      });

html：

 <div id="main-content">
        <div class="featured">
            <div class="featured-heading">
                <h3>Recent Works</h3>
                <p class="sub-heading">Check out my latest work</p>
            </div>
            <p class="featured-para">
                Elementum sed pid nunc, placerat quis parturient, 
                sit nascetur? Mid placerat vel, cum scelerisque diam.
                placerat quis parturient dolorElementum sed pid
                placerat quis parturient.
            </p>
        </div>
        <div id="latest-w" class="pleft">
            <div class="latest-img">
                <a id="img-swap1" class="img-swap" href="#">
                    <img src="images/dentalwise.jpg" width="191" height="129" />   
                </a>    
            </div>
        </div>
        <div id="latest-w" class="pleft">
            <div class="latest-img">
                <a id="img-swap2" class="img-swap" href="#">
                    <img class="img-swap" src="images/wyevallay.jpg" width="191" height="129" />  
                </a>    
            </div>
        </div>
        <div id="latest-w" class="pleft">
            <div class="latest-img">
                <a id="img-swap3" class="img-swap" href="#">
                    <img src="images/easycms.jpg" width="191" height="129" /> 
                </a>    
            </div>
        </div>
    </div>

近期作品
查看我的最新作品


生产要素，分娩地点，
坐纳赛特？中间的地方有一层，还有一个十字形的直径。
产褥期产褥
普莱斯利特是一位产妇。

你应该有两个独立的图像。把一个放在另一个后面。然后，您可以淡出顶部的一个，它将具有“交叉淡出”的效果。如果您只更改图像的

src

，则无法使其交叉淡入。

您应该有两个单独的图像。把一个放在另一个后面。然后，您可以淡出顶部的一个，它将具有“交叉淡出”的效果。如果您只更改图像的

src

，则无法使其交叉淡入。

如果您的图像都遵循相同的模式，即

name.jpg

->

name hover.jpg

，则您可以自动化整个过程：

$(function() {
    // Create your hover images:
    $('.img-swap img').each(function() {

        // Construct your hover img src:
        var src = $(this).attr('src').replace(/\.jpg/, '-hover.jpg');

        // Clone the img, give it the new src,
        // place the clone after the original,
        // and position it underneath
        var offset = -$(this).outerWidth();
        $(this).clone()
            .attr('src', src)
            .css({position: 'relative', left: offset+'px', zIndex: -1})
            .insertAfter($(this));
    });

    // Create mouseover to "cross-fade":
    $('.img-swap').on('mouseover', 'img', function() {
        // Keep it barely visible, so it doesn't re-flow the DOM
        $(this).stop().fadeTo(350, .01);
    }).on('mouseleave', 'img', function() {
        $(this).stop().fadeTo(350, 1);
    });
});

---

下面是一个jFiddle示例：

如果您的图像都遵循相同的模式，即

name.jpg

->

name hover.jpg

，则可以自动执行整个过程：

$(function() {
    // Create your hover images:
    $('.img-swap img').each(function() {

        // Construct your hover img src:
        var src = $(this).attr('src').replace(/\.jpg/, '-hover.jpg');

        // Clone the img, give it the new src,
        // place the clone after the original,
        // and position it underneath
        var offset = -$(this).outerWidth();
        $(this).clone()
            .attr('src', src)
            .css({position: 'relative', left: offset+'px', zIndex: -1})
            .insertAfter($(this));
    });

    // Create mouseover to "cross-fade":
    $('.img-swap').on('mouseover', 'img', function() {
        // Keep it barely visible, so it doesn't re-flow the DOM
        $(this).stop().fadeTo(350, .01);
    }).on('mouseleave', 'img', function() {
        $(this).stop().fadeTo(350, 1);
    });
});

---

下面是一个jFiddle示例：

请将两个图像的HTML与它们周围的HTML一起发布。在这里使用

position:absolute

会有所帮助，但我不能说得更具体。请将两幅图像的HTML与它们周围的HTML一起发布。在这里使用

position:absolute

会有帮助，但我不能说得更具体了。我明白你的意思。我不局限于src，我想看看它是如何做到的，无论如何，它可以做到。我明白你的意思。我不局限于src，我想看看它是如何做到的，无论如何，它可以做到。