我有两行jQuery,我需要一个在前一个完成后运行。
我知道js是逐行读取的,但第二行很快就会发生。
我不能使用jQuery回调,因为遗憾的是这些函数没有它们。
我尝试了等待500毫秒,1000毫秒和1600毫秒的setTimeout()
,但它似乎没有用。在视觉上,第二行发生在第一行完成之前。
第一个选择器中使用的元素的css转换为1秒,我希望它完成,然后第二行发生。
是否可以执行以下操作:
如果转换完成,请运行js 否则等待,然后检查转换是否完成,如果是,则运行js。
以下是两行js:
$('#searchInput').removeClass('slideBack').css('top', 0);
$('#headerTopBar').css('position', 'relative').hide();
答案 0 :(得分: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);
答案 1 :(得分:0)
.css()
不接受回电,您可以改为使用 .animate() :
$('#searchInput').removeClass('slideBack').animate({top:0},500,function () {
$('#headerTopBar').css('position', 'relative').hide();
});