jQuery：先强制淡出（）再强制预结束（）div_Jquery

jQuery：先强制淡出（）再强制预结束（）div

jquery

jQuery：先强制淡出（）再强制预结束（）div,jquery,Jquery,在这个页面上，当您单击文本时，div1必须淡出并删除自身，div2必须出现。问题是，脚本首先在div2前面加上前缀，然后div1消失。如何强制脚本使div1淡出，然后在div2前面加上前缀注: 这是我问题的最简单的例子。不要建议我仅仅更改文本或其他内容，因为在我试图实现的网页中，交换div是不可避免的（div有很多数据）我必须使用prepend（），因此没有append（）或appendTo（）建议提前谢谢 index.html <!DOCTYPE html> <html

在这个页面上，当您单击文本时，div1必须淡出并删除自身，div2必须出现。问题是，脚本首先在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();
    });
});

$（文档）.ready（函数（）{
$（文档）。在（“单击”，“文本1”，函数（）上）{
$（“#div1”）.fadeOut（函数（）{
$（this.remove（）；
});
$（“正文”）。前缀（“”）；
$（“第2分部”）
.hide（）
.append（“这是div2”）
.fadeIn（）；
});
$（文档）。在（“单击”，“文本2”，函数（）上）{
$（“#div2”）.fadeOut（函数（）{
$（this.remove（）；
});
$（“正文”）。前缀（“”）；
$（“第1部分”）
.hide（）
.append（“这是div1”）
.fadeIn（）；
});
});

您可以使用

.promise（）

和

.done（）

：

$（文档）。在（“单击“，”文本1“，函数（）上）{
$（“#div1”）.fadeOut（函数（）{
$（this.remove（）；
}).promise（）.done（function（）{/您可以使用.promise（）
和.done（）
：
$（文档）。在（“单击“，”文本1“，函数（）上）{
$（“#div1”）.fadeOut（函数（）{
$（this.remove（）；
}).promise（）.done（function（）{/要这样吗
只需使用.delay（800）
to.fadeIn（'div'）
$（文档）.ready（函数（）{
$（文档）。在（“单击”，“文本1”，函数（）上）{
$（“#div1”）.fadeOut（函数（）{
$（this.remove（）；
});
$（“正文”）。前缀（“”）；
$（“第2分部”）
.hide（）
.append（“这是div2”）
.delay（800.fadeIn（）；
});
$（文档）。在（“单击”，“文本2”，函数（）上）{
$（“#div2”）.fadeOut（函数（）{
$（this.remove（）；
});
$（“正文”）。前缀（“”）；
$（“第1部分”）
.hide（）
.append（“这是div1”）
.delay（800.fadeIn（）；
});
});
你想要这样吗
只需使用.delay（800）
to.fadeIn（'div'）
$（文档）.ready（函数（）{
$（文档）。在（“单击”，“文本1”，函数（）上）{
$（“#div1”）.fadeOut（函数（）{
$（this.remove（）；
});
$（“正文”）。前缀（“”）；
$（“第2分部”）
.hide（）
.append（“这是div2”）
.delay（800.fadeIn（）；
});
$（文档）。在（“单击”，“文本2”，函数（）上）{
$（“#div2”）.fadeOut（函数（）{
$（this.remove（）；
});
$（“正文”）。前缀（“”）；
$（“第1部分”）
.hide（）
.append（“这是div1”）
.delay（800.fadeIn（）；
});
});
试着这样做：
$（文档）。在（“单击“，”文本1“，函数（）上）{
$（“#div1”）.fadeOut（函数（）{
$（this.remove（）；
$（“正文”）。前缀（“”）；
$（“第2分部”）
.hide（）
.append（“这是div2”）
.fadeIn（）；
});
});
试着这样做：
$（文档）。在（“单击“，”文本1“，函数（）上）{
$（“#div1”）.fadeOut（函数（）{
$（this.remove（）；
$（“正文”）。前缀（“”）；
$（“第2分部”）
.hide（）
.append（“这是div2”）
.fadeIn（）；
});
});
只需将fadeIn移到回调中即可。检查此处：
$（文档）.ready（函数（）{
$（文档）。在（“单击”，“文本1”，函数（）{
$（“#div1”）.fadeOut（函数（）{
$（this.remove（）；
$（“正文”）。前缀（“”）；
$（“第2分部”）
.hide（）
.append（“这是div2”）
.fadeIn（）；
});
});
$（文档）。在（“单击”，“文本2”，函数（）{
$（“#div2”）.fadeOut（函数（）{
$（this.remove（）；
$（“正文”）。前缀（“”）；
$（“第1部分”）
.hide（）
.append（“这是div1”）
.fadeIn（）；
});
});
});
只需将fadeIn移到回调中即可。检查此处：
$（文档）.ready（函数（）{
$（文档）。在（“单击”，“文本1”，函数（）{
$（“#div1”）.fadeOut（函数（）{
$（this.remove（）；
$（“正文”）。前缀（“”）；
$（“第2分部”）
.hide（）
.append（“这是div2”）
.fadeIn（）；
});
});
$（文档）。在（“单击”，“文本2”，函数（）{
$（“#div2”）.fadeOut（函数（）{
$（this.remove（）；
$（“正文”）。前缀（“”）；
$（“第1部分”）
.hide（）
.append（“这是div1”）
.fadeIn（）；
});
});
});
您是否尝试过将fadeIn
放在淡出
的回调中的remove
之后？您是否尝试过将fadeIn
放在淡出
的回调中的remove之后？
    $(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();
       });
    });

$(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();
    });
});

$(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).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();
        });
    });
});