My code works but it doesn't fade to second image directly: fades out first image -> delay -> fades in second one. How do I fade directly to second image?

My jquery code

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

My code works but it doesn't fade to second image directly: fades out first image -> delay -> fades in second one. How do I fade directly to second image?

My jquery code

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

• javascript
• jquery
• image
• fade
• onhover

• If you could share your HTML markup we could test and help you. – Shef Commented Sep 2, 2011 at 8:14
• <img class="fadeim" src="std.png" alt="Exit"/> script simply changes src="std.png" into 'src="std-hover.png"' – Tural Ali Commented Sep 2, 2011 at 8:17
• There doesn't seem to be any delay? – Shef Commented Sep 2, 2011 at 8:30
• don't you see white screen between theese images? – Tural Ali Commented Sep 2, 2011 at 9:15
• It's because of the fadeout/fadein effect. Take a look at this. – Shef Commented Sep 2, 2011 at 9:18

5 Answers 5

You can do the following [what i normally do]:

You can check out my testing link : http://jsfiddle/fJFmx/1/

I set a container [fixed width&height] for images. Set the style of for the images to position:absolute and with fixed dimensions.

HTML example:

<div id='slideContainer'>
    <img src='http://www.ct4me/images/dmbtest.gif' />
    <img src='http://pievscake./images/test.jpg' />
</div>

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

Hope this helps.

You might want to use CSS3 for what you're trying to do instead, as the image will not change if someone has JavaScript turned off. Try this 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;
}

The above code assumes your image is 200×100px; you should change the width and height settings to the same size as the image. So if you open a page with this CSS applied, you'll see the image, and when you hover, the image should fade into the other one. This currently only works in WebKit (Chrome and Safari) and Mozilla (Firefox), so if someone uses an unsupported browser, the page will act exactly the same, but the image will immediately change without fading.

Ad@m

You need to place two elements over one another (via CSS absolute/relative positioning), then you will be able to decrease the opacity of the top one to make it look like it is fading into the bottom one.

After the fadeout is plete, quickly switch the SRC atributes of the images (user won't notice) and prepare for another cycle.

I suggest this HTML (because you only set width&height in one place and children will adapt to the parent size):

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

While you hover the 'first' image, the second one is NOT yet loaded.

Try this way:

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

});

FIDDLE DEMO

The way to solve your problem:

pre load the second picture like Rok Kralj said,don't load it the second you need it.

otherwise you would have to wait for the browser fetching it from server

A better way

set one picture as src,other one as parentNode's background-image. only animate the image.

Because users don't need the blank gap,they just need the transforming for better experience