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 - ＆gt; 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/

如何将此jquery淡入淡出然后变为交叉淡入淡出？

2 个答案: