如何使用jquery直接淡出到另一个图像（没有任何延迟）？

Question

我的代码可以工作，但它不会直接淡入第二个图像：淡出第一个图像 ->延迟->在第二个中消失。如何直接淡入第二张图像？

我的 jquery 代码

$(document).ready(function() {
    var std = $(".fadeim").attr("src");
    var hover = std.replace(".png", "-hover.png");
    $(".fadeim")
        .mouseover(function() {   
            $(this).fadeOut("fast",function(){  
                $(this).attr("src", hover);  
                $(this).fadeIn("fast");  
            });  
        })  
        .mouseout(function() {  
            $(this).fadeOut("fast",function(){  
                $(this).attr("src", std);  
                $(this).fadeIn("fast");           
            });  
        })  
    }); 
});

Answer 1

您可以执行以下操作[我通常做的事情]：

您可以查看我的测试链接：http://jsfiddle。 net/fJFmx/1/

我为图像设置了一个容器[固定宽度和高度]。将图像的样式设置为“位置：绝对”并具有固定尺寸。

HTML 示例：

<div id='slideContainer'>
    <img src='http://www.ct4me.net/images/dmbtest.gif' />
    <img src='http://pievscake.com/images/test.jpg' />
</div>

然后是 Jquery：

$(function() {

    $('#slideContainer img:first').fadeIn();

    $('#slideContainer').hover(function() {
        $('#slideContainer img:first').fadeOut();
        $('#slideContainer img:last').fadeIn();
    }, function() {
        $('#slideContainer img:first').fadeIn();
        $('#slideContainer img:last').fadeOut();
    });

});

CSS

#slideContainer {border:1px solid #ffcc00;width:50px; height:50px;}
#slideContainer img {position:absolute; width:50px; height:50px; display:none;}

希望这会有所帮助。

Answer 2

您可能想使用 CSS3 来完成您想要做的事情，因为如果有人关闭了 JavaScript，图像将不会改变。试试这个CSS：

.fadeim {
    width: 200px;
    height: 100px;
    background: url(std.png) center center no-repeat;
    -webkit-transition: background 500ms linear;
    -moz-transition: background 500ms linear;
    transition: background 500ms linear;
}

.fadeim:hover {
    background: url(std-hover.png) center center no-repeat;
}

上面的代码假设你的图像是200×100px；您应该将宽度和高度设置更改为与图像相同的尺寸。因此，如果您打开应用了此 CSS 的页面，您将看到该图像，并且当您将鼠标悬停时，该图像应淡入另一个页面。目前，此功能仅适用于 WebKit（Chrome 和 Safari）和 Mozilla（Firefox），因此如果有人使用不受支持的浏览器，页面的行为将完全相同，但图像会立即发生变化而不会褪色。

广告@m

Answer 3

您需要将两个元素放在一起（通过 CSS 绝对/相对定位），然后您将能够降低顶部元素的不透明度，使其看起来像是淡入底部元素。

淡出完成后，快速切换图像的SRC属性（用户不会注意到）并准备另一个周期。

我建议使用以下 HTML（因为您只在一处设置宽度和高度，子级将适应父级尺寸）：

<div id='slideContainer' style='width:50px; height:50px; position: relative;'>
     <img src='hover.jpg' style='position:absolute; top:0px; right:0px; bottom:0px; left: 0px; display:none;' />
     <img src='original.jpg' style='position:absolute; top:0px; right:0px; bottom:0px; left: 0px; display:none;' />
</div>

Answer 4

当您将鼠标悬停在“第一个”图像时，第二个图像尚未加载。

尝试以下方式：

$('.fadeim').each(function() {

    var std = $(this).attr("src");
    var hover = std.replace(".png", "-hover.png");  

    $(this).clone().insertAfter(this).attr('src', hover).removeClass('fadeim').siblings().css({
        zIndex: '1',
        position:'absolute'
    });
    $(this).mouseenter(function() {
        $(this).stop().fadeTo(600, 0);
    }).mouseleave(function() {
        $(this).stop().fadeTo(600, 1);
    });

});

FIDDLE DEMO

Answer 5

解决问题的方法：

像Rok Kralj所说的那样预加载第二张图片，不要在需要时加载它。

否则你将不得不等待浏览器从服务器获取它

更好的方法

将一张图片设置为src，另一张设置为parentNode的背景图像。仅对图像进行动画处理。

因为用户不需要空白，他们只需要改造以获得更好的体验