Question

我在jQuery中有以下代码：

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

现在改变图像是这样的： - Image1淡出 - 不显示图像 - Image2淡入

我怎样才能解决这个问题，即图像逐渐消失，没有时间，而且图像之间没有图像？

这是您可以看到我的意思的网站：

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

当您将鼠标悬停在图像上时，图像加载前会有一个很短的空白区域。我该如何解决？

Answer 1

使用两个不同的图像。通过将其css属性设置为“position：absolute”，让它们覆盖相同的空间。淡出第一个，同时将另一个设置为false。您可能需要一个具有位置的正确容器：relative作为position：absolute可能会导致它们出现意外行为。

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

Answer 2

将[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
    });

Answer 3

您可以尝试在点击处理程序之外预加载图片。这样的事情应该有效：

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

jQuery：图像淡入另一个图像

3 个答案: