在上一个完成之后运行一行jQuery

我有两行jQuery，在完成上一行之后需要运行一行。在上一个完成之后运行一行jQuery

我知道js是逐行读取，但第二行发生得太快。

我不能使用jQuery回调，因为这些功能很不幸没有它们。

我试着做一个setTimeout()等待500ms，1000ms和1600ms，但它似乎没有工作。在视觉上，第二行发生在第一行完成之前。

在第一个选择器中使用的元素具有1s的css过渡，我希望完成，然后第二行发生。

是否有可能做这样的事情：

如果转换完成后，运行JS 否则等待，然后检查是否过渡完成，那么如果实际运行JS。

这里是JS的两行：

$('#searchInput').removeClass('slideBack').css('top', 0); 
$('#headerTopBar').css('position', 'relative').hide();

来源

2014-03-19 gomangomango

'的.css（）'是不是一个异步调用，因此第二只喜欢完成后执行的第一行..除非你正在使用过渡css动画 –

@ArunPJohny是的，我正在使用CSS过渡动画。这就是为什么“transitionend”的答案有效。 – gomangomango

如果你想等待CSS过渡要完成，那么您需要为正在进行转换的对象上的CSS transitionend事件使用eventListener。然后，这将提供一个事件处理函数回调，您可以在CSS转换完成后执行第二行代码。

$('#searchInput').one("transitionend", function(e) { 
    $('#headerTopBar').css('position', 'relative').hide(); 
}).removeClass('slideBack').css('top', 0);

现在，在现实世界中，并不是每一个浏览器使用相同的事件名称为过渡结束事件这样一个通常是安装事件处理程序代码中的数字转变结束事件的所有可能的名字或一个在本地浏览器中使用哪个名称，然后将该变量用作事件名称。

注意：我使用.one()，以便该事件处理程序在触发后自动自动卸载。我不确定你是否想要这样做，但通常对于这些类型的事件通知来说是可取的。

这里有一个更详细的版本，监听所有可能的过渡结束事件名称（所有主流浏览器）：

$('#searchInput').one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e) { 
    $('#headerTopBar').css('position', 'relative').hide(); 
}).removeClass('slideBack').css('top', 0);

来源

2014-03-19 02:37:51 jfriend00

'.one（）'和'.on（）'有什么区别？ – gomangomango

@gomangomango - 在我的回答中解释了使用'.one（）'的原因，jQuery在['.one（）']（http://api.jquery.com/one/）上有完整的doc。 – jfriend00

哦，好的。谢谢你解释。 – gomangomango

.css()不采取回调，您可以使用.animate()代替：

$('#searchInput').removeClass('slideBack').animate({top:0},500,function() { 
    $('#headerTopBar').css('position', 'relative').hide(); 
});

来源

2014-03-19 02:30:56 Felix

为什么你认为在OP的情况下，第二行是在第一行完成之前执行的......可能出现的唯一问题是它是否正在进行css过渡......在这种情况下，此解决方案仍然不会解决问题 –

在上一个完成之后运行一行jQuery

回答

相关问题