一个接一个地触发jQuery事件

Trigger jQuery events one after another

本文关键字：一个 jQuery 事件      更新时间：2023-09-26

嗨，我正在尝试创建一个动画，其中一个类只添加在触发完成之前的一个类之后。

$('.flipper').click(function(){
  $('#first').addClass('first-flip');
  $('#second').addClass('second-flip');
  $('#fourth').addClass('fourth-flip');
});

所以

$('#second').addClass('second-flip');

只会在时触发

$('#first').addClass('first-flip');

已完成处理。

所以另一种解释方式是

区块A添加了旋转效果，在区块A旋转后，区块B才会向右移动20像素。

我基本上只是想知道如何创建按顺序触发的Jquery效果。

您想要绑定到transitionend或animationend。下面是一个使用transitionend的示例。盒子移动完成后，会添加一个新类，开始下一次转换，使盒子变蓝。

var mydiv = document.querySelector("#mydiv");
document.querySelector("button").addEventListener("click", buttonHandler);
mydiv.addEventListener("transitionend", onEndHandler)
  
function buttonHandler() {
  mydiv.classList.add("move-left");
}
function onEndHandler() {
  mydiv.classList.add("turn-blue");
}
#mydiv {
  background: red;
  width: 10em;
  height: 10em;
  transition: 1s;
}
#mydiv.move-left {
  transform: translateX(100px);
}
#mydiv.turn-blue {
  background: blue;
}
<div id="mydiv"></div>
<button>Move div</button>

如果你需要jQuery版本，它在这里：

var mydiv = $("#mydiv");
$("button").on("click", buttonHandler);
mydiv.on("transitionend", onEndHandler)
function buttonHandler() {
  mydiv.addClass("move-left");
}
function onEndHandler() {
  mydiv.addClass("turn-blue");
}

不错的资源：https://davidwalsh.name/css-animation-callback

相关文章：