0

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

笔记：

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

提前致谢。

索引.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>

脚本.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();
    });
});
4

4 回答 4

2

像这样尝试：示例

$(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();
    });
});
于 2013-06-21T07:45:11.413 回答
1

只需将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();
        });
    });
});
于 2013-06-21T07:46:55.870 回答
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 ("<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();
       });
    });
于 2013-06-21T07:43:58.643 回答
0

你想要这样吗？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();
    });
});
于 2013-06-21T07:44:25.067 回答