Question

对于jquery中的模糊事件，我想在div中显示和图像1秒钟（淡出它），然后在同一个div中显示另一个图像。我怎么能在jquery中做到这一点。谢谢你的帮助！这就是我尝试过的。

    <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

对不起，让我更清楚一点。使用jQuery的各种动画方法之一。

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

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

});

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

在CSS中，您可以将图像2的可见性设置为默认隐藏，以便在适当的时候淡入。

#img2 {
    display: none;
}

Answer 2

这可能会有助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);
    });
});
});

在jquery中显示和淡出图像

2 个答案: