Question

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

我知道js是逐行读取的，但第二行很快就会发生。

我不能使用jQuery回调，因为遗憾的是这些函数没有它们。

我尝试了等待500毫秒，1000毫秒和1600毫秒的setTimeout()，但它似乎没有用。在视觉上，第二行发生在第一行完成之前。

第一个选择器中使用的元素的css转换为1秒，我希望它完成，然后第二行发生。

是否可以执行以下操作：

如果转换完成，请运行js 否则等待，然后检查转换是否完成，如果是，则运行js。

以下是两行js：

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

Answer 1

如果要等待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);

Answer 2

.css()不接受回电，您可以改为使用 .animate() ：

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

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

2 个答案: