Jquery附加元素混亂

Question

我有以下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元素晚於附加項目可見，但事實並非如此......為什么？

Answer 1

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);

演示： 小提琴

Answer 2

它在jQuery文檔中說：

http://api.jquery.com/delay/

...這不會延遲不使用效果隊列的.show（）或.hide（）的無參數形式。

一個很大的誤解就是思考.delay會延遲在.delay之后鏈接的功能。 這不是真的，因為.delay僅用於延遲動畫隊列。

要將函數添加到動畫隊列中，可以使用.queue ：

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

http://jsfiddle.net/DerekL/egdtD/