jQuery：图像淡入另一个图像

Question

I have the following code in jQuery:

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

The changing of the image now works so: - Image1 fade-out - No image is displayed - Image2 fade-in

How can I fix this, that the images fading together, without a lil time with no image between them?

Here's the site where you can see what I mean:

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

When you're hovering on a image, theres a short empty space before the image loads in. How can I fix it?

Answer 1

Use two different images. Have them cover the same space by setting their css properties "position: absolute". Fade the first one out while setting the other one to false. You may need a proper container with position: relative as position: absolute may cause them to behave...unexpectedly.

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

Answer 2

Adding [queue: false] to the animation will allow for multiple animations at the same time

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

You can try preloading your image outside of the click handler. Something like this should work:

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