Show and fadout images in jquery

Question

With the blur event in jquery I want to show and image in a div for 1 second (fade it out) and then show in the same div another image. How can I do it in jquery. Thank for you help! This is what I've tried.

    <form name="field" method="post" id="form">
        <label for="username">Username:</label><br>
        <input name="username" id="username" type="text"/>   
        <span id="img"></span><span id="img2"></span><br><br>
        <input name="submit" type="button" value="Register" id="submit"/><br><br>
    </form>



$(document).ready(function(){

$("#username").blur(test);

function test(){
    $("#img").empty();
        $('<img src=images/loader.gif>').prependTo("#img").fadeOut(1000,     function(){
            $("#img").prepend('<img src=images/no.png>');       
        });


}   
});

Answer 1

This might help http://jsfiddle.net/m4xbf/

HTML

<form name="field" method="post" id="form">
    <label for="username">Username:</label>
    <br/>
    <input name="username" id="username" type="text" /> <span id="img"></span>
 <span id="img2"></span>

    <br/>
    <br/>
    <input name="submit" type="button" value="Register" id="submit" />
    <br/>
    <br/>
</form>

jQuery

$(document).ready(function(){
$("input[type=text]").blur(function () {
    $("#img").append("<img src='http://loadinggif.com/images/image-selection/29.gif' width='20' height='20' alt=''/>").fadeIn(500).delay(1000).fadeOut(500, function () {
        $("#img").empty().append("<img class='image1' src='https://cdn1.iconfinder.com/data/icons/essen/32/check.png' width='20' height='20' alt=''/>").fadeIn(500).delay(1000).fadeOut(500);
    });
});
});

Answer 2

Sorry, let me be more clear. Use one of jQuery's various animate methods.

$(document).ready(function() {
    $('#username').blur(test);

    function test() {
        $('#img').fadeOut(1000, function() {
            $('#img2').fadeIn(1000);
        });
    }

});

Your HTML:

<form name="field" method="post" id="form">
    <label for="username">Username:</label><br>
    <input name="username" id="username" type="text"/>   

    <!-- your image div -->
    <div id='id_of_your_div'>
        <img id='img' />
        <img id='img2' />
    </div>

    <input name="submit" type="button" value="Register" id="submit"/><br><br>
</form>

In your CSS, you can set the visibility of image 2 to be hidden by default so that it will fade in at the appropriate time.

#img2 {
    display: none;
}