Javascript Jquery追加元素混淆

我有以下javascript：

    $('#span_search').hide();

    $('#team_header').append($('<a href="#group-form" id="btn_new_category" class="btn btn-s-md btn-info" style="float: right;" data-toggle="modal">New Category</a>').hide().delay(500).fadeIn());

    $('#span_search').delay(1500).show();

$（'#span_search'）.hide（）；
$（'#team_header'）。追加（$（''.hide（）.delay（500.fadeIn（））；
$（'#span_search'）.delay（1500.show（）；

---

现在我假设span元素在附加项之后才可见，但事实并非如此。。。为什么？

delay

仅适用于使用队列执行的函数，其中队列中下一项的执行延迟到计时器用完

.show（）

（不带任何参数）不使用基于队列的执行，但使用动画的方法（如

fadeIn（）

，

slideToggle（）

等）会使用

一种解决方案是自己对一个函数进行排队，该函数将显示如下所示的内容

$('#span_search').delay(1500).queue(function(){
    $(this).show()
})

演示：

或者使用动画版本

$('#span_search').delay(1500).fadeIn();
$('#span_search').delay(1500).slideToggle();
$('#span_search').delay(1500).show(1);

---

演示：

jQuery文档中说：

。。。此不会延迟不使用效果队列的.show（）或.hide（）的无参数形式

一个很大的误解是认为

.delay

会延迟

.delay

之后链接的函数。这是不正确的，因为

.delay

仅用于延迟动画队列

要将函数添加到动画队列中，可以使用：

$('#span_search').hide();
$('#team_header').append($('<a href="#group-form" id="btn_new_category" class="btn btn-s-md btn-info" style="float: right;" data-toggle="modal">New Category</a>').hide().delay(500).fadeIn());
$('#span_search').delay(1500).queue(function(){
    $(this).show();
})

$('#span_search').delay(1500).show(0);