Jquery附加元素混乱

Question

i have the following 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();

Now i would assume that the span element would be visible later than the appended item but this is not the case... Why?

Answer 1

delay works with only with functions that uses a queue for execution, where the execution of the next item in the queue is delayed till the timer is ran out.

.show() (without any argument) doesn't use a queue based execution, but methods that uses animation like fadeIn() , slideToggle() etc does.

One solution is to queue a function yourself which will display the content as shown below

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

Demo: Fiddle

or use a animated version

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

Demo: Fiddle

Answer 2

It says in the jQuery documentation:

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

... this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

One big misunderstanding is thinking .delay will delay the functions chained after .delay . That is not true because .delay is used to delay the animation queue only.

To add a function into the animation queue, you can use .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();
})

or set the interval to zero:

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

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