Question

我想隐藏所有孩子，然后追加其他孩子。问题是有时候append（）先发生然后hide（）发生（Chrome，Firefox）。

我的期望：

Parent
Other child

但有时打印：

Parent
Child

实际上，如果我在IE9中运行此代码，它总是打印：

Parent
Child

完整代码

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>

<script type='text/javascript'> 
$(document).ready(function(){
    // Hide children.
    $(".parent").children().hide();

    // Append more child.
    $(".parent").append("<div class=\"otherChild\">Other child</div>");
});
</script>
</head>

<body>
    <div class="parent">
        Parent
        <div class="child">
            Child
        </div>
    </div>
</body>
</html>

Answer 1

然后在complete：

上触发该功能

<script type='text/javascript'> 
$(document).ready(function(){
    // Hide children.
    $(".parent").children().hide(2000, function() {
      // Append more child.
      $(".parent").append("<div class=\"otherChild\">Other child</div>");
    });
});
</script>

Answer 2

<强> Demo Fiddle

使用hide() - Reference

进行回调

.hide('duration',callback)：

第一个参数占用事件的持续时间。如果您想要快速隐藏事件，请在此字段中使用0。
第二个回调，在hide事件完成后执行。

$(document).ready(function(){

    $(".parent").children().hide(0, function() {
        $(".parent").append('<div class="otherChild">Other child</div>');
    });
});

append（）发生在hide（）之前

2 个答案: