Question

在此页面上，当您单击文本时，div1必须淡出并删除自身，并且必须出现div2。事情是脚本首先pre2nd div2然后div1淡出。如何强制脚本使div1淡出然后加上div2？

注意：

这是我问题的最简单的情况。不要建议我只更改文本或其他替代方法，因为在我试图实现的网页中，交换div是不可避免的（div有很多数据）。
我必须使用prepend（），所以没有append（）或appendTo（）建议。

提前致谢。

的index.html

<!DOCTYPE html>
<html>

    <head>
        <script src = "http://code.jquery.com/jquery-1.10.1.min.js" type = "text/javascript"></script>
        <script src = "script.js" type = "text/javascript"></script>
    </head>

    <body>
        <div id = "div1">
            <h1 id = "text1">This is div1</h1>
        </div>
    </body>

</html>

的script.js

$(document).ready (function() {
    $(document).on ("click", "#text1", function() {

        $("#div1").fadeOut (function() {
            $(this).remove();
        });
        $("body").prepend ("<div id = 'div2'></div>");
        $("#div2")
            .hide()
            .append ("<h1 id = 'text2'>This is div2</div>")
            .fadeIn();
    });

    $(document).on ("click", "#text2", function() {

        $("#div2").fadeOut (function() {
            $(this).remove();
        });
        $("body").prepend ("<div id = 'div1'></div>");
        $("#div1")
            .hide()
            .append ("<h1 id = 'text1'>This is div1</div>")
            .fadeIn();
    });
});

Answer 1

尝试这样：Example

$(document).on ("click", "#text1", function() {

    $("#div1").fadeOut (function() {

        $(this).remove();

        $("body").prepend ("<div id = 'div2'></div>");
        $("#div2")
        .hide()
        .append ("<h1 id = 'text2'>This is div2</div>")
        .fadeIn();
    });
});

Answer 2

将fadeIn移动到回调中。点击此处：http://jsfiddle.net/balintbako/WGsGu/

$(document).ready(function () {
    $(document).on("click", "#text1", function () {

        $("#div1").fadeOut(function () {

            $(this).remove();
            $("body").prepend("<div id = 'div2'></div>");
            $("#div2")
                .hide()
                .append("<h1 id = 'text2'>This is div2</div>")
                .fadeIn();

        });
    });

    $(document).on("click", "#text2", function () {

        $("#div2").fadeOut(function () {

            $(this).remove();
            $("body").prepend("<div id = 'div1'></div>");
            $("#div1")
                .hide()
                .append("<h1 id = 'text1'>This is div1</div>")
                .fadeIn();
        });
    });
});

Answer 3

您可以使用.promise()和.done()：

    $(document).on ("click", "#text1", function() {

       $("#div1").fadeOut (function() {
          $(this).remove();
       }).promise().done(function(){ // <----here
          $("body").prepend ("<div id = 'div2'></div>");
          $("#div2")
             .hide()
             .append ("<h1 id = 'text2'>This is div2</div>")
             .fadeIn();
       });        
    });

    $(document).on ("click", "#text2", function() {
       $("#div2").fadeOut (function() {
          $(this).remove();
       }).promise().done(function(){ // <----here
          $("body").prepend ("<div id = 'div1'></div>");
          $("#div1")
             .hide()
             .append ("<h1 id = 'text1'>This is div1</div>")
             .fadeIn();
       });
    });

Answer 4

你想要这样吗？ http://jsfiddle.net/yeyene/tcJF9/

只需将.delay(800)用于.fadeIn（'div'）。

$(document).ready (function() {
    $(document).on ("click", "#text1", function() {

        $("#div1").fadeOut (function() {

            $(this).remove();

        });
        $("body").prepend ("<div id = 'div2'></div>");
        $("#div2")
            .hide()
            .append ("<h1 id = 'text2'>This is div2</div>")
            .delay(800).fadeIn();
    });

    $(document).on ("click", "#text2", function() {

        $("#div2").fadeOut (function() {

            $(this).remove();

        });
        $("body").prepend ("<div id = 'div1'></div>");
        $("#div1")
            .hide()
            .append ("<h1 id = 'text1'>This is div1</div>")
            .delay(800).fadeIn();
    });
});

jQuery：首先强制fadeOut（）然后prepend（）div

4 个答案: