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()
})

演示：Fiddle

或使用动画版

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

演示：Fiddle

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/

Jquery附加元素混乱

2 个答案: