如何更改此jQuery淡入然后变为交叉淡入淡出？

Question

好的，我必须在页面上放置两张图像，我想在鼠标悬停和鼠标滑出之间进行淡入淡出，我希望它反转，以便图像看起来好像恢复了其原始状态。

现在，我可以通过淡出第一个图像，然后按如下所示使替换淡入淡出的方式工作，如何像上面那样使这种交叉淡入淡出？

$("#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>

Answer 1

好吧，您应该有两个单独的图像。 将一个放在另一个后面。 然后，您可以淡出顶部的效果，这将具有“交叉渐变”效果。 如果仅更改图像的src ，则无法交叉淡入淡出。

Answer 2

如果您的图片都遵循相同的模式，即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示例： http : //jsfiddle.net/jtbowden/xqUQ6/3/