一个接一个地触发jQuery事件
一个接一个地触发jQuery事件
提问于 2016-05-05 07:49:42
嗨，我正在尝试创建一个动画，其中一个类被添加到完成触发之前只有一个。
$('.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才会向右移动20px。
我基本上只想知道如何创建按顺序触发的Jquery效果。
回答 1
Stack Overflow用户
发布于 2016-05-05 08:00:55
您希望绑定到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");
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37040002
复制相关文章
相似问题
腾讯云开发者
