jQuery：图像淡入另一个图像答案

【问题标题】：jQuery: Image fading to another imagejQuery：图像淡入另一个图像
【发布时间】：2013-07-01 15:35:10
【问题描述】：

我在 jQuery 中有以下代码：

if (klick = true) $(this).fadeOut('fast', function(){
    $(this).attr("src", "../img/daniel_effects.png").fadeIn();
});

图像的改变现在起作用了： - Image1 淡出 - 不显示图像 - Image2 淡入

我该如何解决这个问题，图像一起消失，没有时间，它们之间没有图像？

这是您可以了解我的意思的网站：

http://anthraxbeats.com/pages/biography.html

当您将鼠标悬停在图片上时，在图片加载之前会有一小段空白区域。我该如何解决？

【问题讨论】：

我该怎么做？在代码中？

标签： javascript jquery image fade out

【解决方案1】：

在动画中添加 [queue: false] 将允许同时多个动画

var $theOtherThing = $(this).attr("src", "../img/daniel_effects.png");

if(klick === true){
    $(this).animate({
        "opacity": "0"
     }, {
        duration: 200,
        queue: false
     });
    $theOtherThing.animate({
        "opacity": "1"
     }, {
        duration: 200,
        queue: false
    });

【讨论】：

【解决方案2】：

您可以尝试在点击处理程序之外预加载您的图片。像这样的东西应该可以工作：

(new Image()).src = "../img/daniel_effects.png";

【讨论】：

【解决方案3】：

使用两个不同的图像。通过设置它们的 css 属性“位置：绝对”让它们覆盖相同的空间。将第一个淡出，同时将另一个设置为 false。您可能需要一个适当的容器，其中 position: relative 作为 position: absolute 可能会导致它们的行为......出乎意料。

#container{
position: relative;
width: 100px;
height: 100px;
}
.img1, .img2{
position: absolute;
width: 100%;
}

【讨论】：