Question

您好我正在尝试创建一个动画，其中一个类仅在完成触发之前添加一个类。

$('.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效果。

Answer 1

您希望加入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

一个接一个地触发jQuery事件

1 个答案: