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/