Question

我的代码有效，但不会直接淡化到第二张图片：淡出第一张图片 - ＆gt;延迟 - ＆gt;在第二个中消失。如何直接淡入第二张图像？

我的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

您需要将两个元素放在一起（通过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 3

您可能希望将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），因此如果有人使用不受支持的浏览器，页面将完全相同，但图像将立即更改而不会褪色。

广告@米

Answer 4

解决问题的方法：

预加载像Rok Kralj所说的第二张照片，不要在你需要的第二张照片中加载它。

否则您将不得不等待浏览器从服务器

获取它

更好的方法

将一张图片设置为src，将另一张图片设置为parentNode的background-image。仅动画图像。

由于用户不需要空白，他们只需要转换以获得更好的体验

Answer 5

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

尝试这种方式：

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

});

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

5 个答案:

FIDDLE DEMO