jQuery:首先强制fadeOut()然后prepend()div

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

笔记:

  1. 这是我最简单的问题。不要建议我只改变文字或替代方法,因为在我试图实现的网页中,交换div是不可避免的(div有很多数据)。
  2. 我必须使用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">
            

This is div1

        </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 ("

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

This is div1</div>")
            .fadeIn();
    });
});
0
您是否尝试在 fadeout 的回调中的 remove 之后放置 fadeIn
额外 作者 Balint Bako,

7 答案

Try like this: Example

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

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

        $(this).remove();

        $("body").prepend ("<div id = 'div2'></div>");
        $("#div2")
        .hide()
        .append ("

This is div2</div>") .fadeIn(); }); });

2
额外
最好的答案,谢谢
额外 作者 Kudayar Pirimbaev,
别客气。
额外 作者 maqjav,

Try like this: Example

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

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

        $(this).remove();

        $("body").prepend ("<div id = 'div2'></div>");
        $("#div2")
        .hide()
        .append ("

This is div2</div>") .fadeIn(); }); });

2
额外
最好的答案,谢谢
额外 作者 Kudayar Pirimbaev,
别客气。
额外 作者 maqjav,

Just move fadeIn into the callback. Check here: 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("

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

This is div1</div>")
                .fadeIn();
        });
    });
});
1
额外

Just move fadeIn into the callback. Check here: 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("

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

This is div1</div>")
                .fadeIn();
        });
    });
});
1
额外

You want like this? 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 ("

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

This is div1</div>")
            .delay(800).fadeIn();
    });
});
0
额外

You want like this? 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 ("

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

This is div1</div>")
            .delay(800).fadeIn();
    });
});
0
额外

您可以使用 .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 ("

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

This is div1</div>")
             .fadeIn();
       });
    });
0
额外