1

我的代码有效，但不会直接淡入第二张图像：淡出第一张图像->延迟->淡入第二张。如何直接淡入第二张图像？

我的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");           
            });  
        })  
    }); 
});
4

5 回答 5

3

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

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

我为图像设置了一个容器 [固定宽度和高度]。将图像的样式设置为 position:absolute 和固定尺寸。

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;}

希望这可以帮助。

于 2011-09-02T08:24:46.993 回答
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>
于 2011-09-02T08:16:15.887 回答
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

于 2011-09-02T08:29:06.130 回答
1

解决您的问题的方法：

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

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

更好的方法

将一张图片设置为 src，另一张作为 parentNode 的背景图片。只为图像设置动画。

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

于 2011-09-02T08:35:10.077 回答
1

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

试试这个方法：

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

});

小提琴演示

于 2011-09-02T08:51:11.577 回答