Question

我创建了一个表单，当用户提交时，表单#search div被显示加载图像的#loading div替换。到目前为止一切正常。

我现在遇到的问题是我希望#loading div在显示#loading div后10秒被#results替换。

有人可以帮助解决最后几行代码吗？

到目前为止：

<div id="search">
    <div id="search-area">
        <h1>Heading Here</h1>
        <form id="target" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
            <input type="text" value="http://"/>
            <input type="submit" value="Analyze"/>
            <div class="clearfix"></div>
        </form>
    </div>
    <div class="clearfix"></div>
</div>

<script>
$( "#target" ).submit(function( event ) {
    $("#search").slideUp("slow", function() {
        $(this).replaceWith("<div id='loading'>" + 
                                "<h2>Please be patient while<br/>" +
                                "we analyse your website.</h2>" + 
                                "<img src='/images/progress.gif'/>" + 
                            "</div>");
    });
    $("#loading").delay(10000).slideUp("slow", function(){
        $(this).replaceWith("<div id='results'>" +
                                "<h2>Here are the results</h2>" +
                            "</div>");
    });
    event.preventDefault();
});
</script>

Answer 1

$("#target").submit(function (event) {

    $("#search").slideUp("slow", function () {            
        $(this).replaceWith("<div id='loading'><img src='/images/loading.gif'/></div>");            
    });

    setTimeout(function () {
        $("#loading").slideUp("slow", function () {
            $(this).replaceWith("<div id='done'>Done!</div>");
        });
    }, 10000);

    event.preventDefault();

});

Answer 2

加载div在第一个动画完成后才可用，第二个动画需要在回调中：

$("#target").submit(function (event) {
    $("#search").slideUp("slow", function () {
        $(this).replaceWith("<div id='loading'>" +
            "<h2>Please be patient while<br/>" +
            "we analyse your website.</h2>" +
            "<img src='/images/progress.gif'/>" +
            "</div>");
        $("#loading").delay(10000).slideUp("slow", function () {
            $(this).replaceWith("<div id='results'>" +
                "<h2>Here are the results</h2>" +
                "</div>");
        });
    })
    event.preventDefault();
});

DEMO

在表单提交Jquery后替换div

2 个答案: