gpt4 book ai didi

javascript - 使用 jQuery 触发 CSS 摇动动画,每一次都有效……为什么?

转载 作者:太空宇宙 更新时间:2023-11-03 20:25:21 25 4
gpt4 key购买 nike

我这里有一个相当简单的 fiddle :http://jsfiddle.net/7aotzqmL/2/单击链接时应该用 CSS 动画摇动 div。它有效,但仅每隔一次(每隔一次)。我很难过-有人可以帮忙吗?

我看过的其他答案提到在使用 onmouseover 时您还需要附加 onmouseout...但这只是一次点击,所以我不确定这是否相关。我只希望 div 在每次点击时而不是每次点击时都摇晃。

jsFiddle:https://jsfiddle.net/7aotzqmL/2/

CSS 代码:

$(function() {
$('a').click(function(ev) {
$('div').toggleClass('shaker');
ev.preventDefault();
});
});
div.shaker {
animation: shake 0.3s;
/* When the animation is finished, start again */
animation-iteration-count: 1; //single shake
}

@keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">asd</a>
<div>shake</div>

最佳答案

试试这个会成功

$(function(){
$('a').click(function(ev){

$('div').addClass('shaker');

setTimeout(function(){

$('div').removeClass('shaker');
},300);
ev.preventDefault();
});
});

下面的代码是在偶数次点击时删除类,而你正在添加类的动画

$('div').toggleClass('shaker');

在上面的解决方案中,div 类将在 0.3 秒动画后被删除,它会在您每次单击时添加 'shaker' 类,并且动画会发生

关于javascript - 使用 jQuery 触发 CSS 摇动动画,每一次都有效……为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56647436/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com