gpt4 book ai didi

javascript - 突出显示动画仅在每隔一次单击按钮时起作用

转载 作者:行者123 更新时间:2023-11-30 09:42:12 26 4
gpt4 key购买 nike

单击按钮时:div 元素以绿色突出显示,然后绿色逐渐消失。

它有效,但它只在每隔一段时间 有效。

  • 第 1 次、第 3 次、第 5 次……当您单击按钮时,动画就会出现。
  • 第 2 次、第 4 次、第 6 次...当您单击按钮时,动画不会发生。

问题:如何让动画每次按钮被点击时出现?

$('button').on('click', function(){
$('div').toggleClass("success-highlight-animation");
});
/*********************************************/
/*********************************************/
/* Fades in success color, then fades it out */
.success-highlight-animation {
-moz-animation: highlight 2s ease 0s 1 alternate ;
-webkit-animation: highlight 2s ease 0s 1 alternate;
animation: highlight 2s ease 0s 1 alternate;
}

@-webkit-keyframes highlight {
from { background-color: #dff0d8;}
to {background-color: white;}
}

@-moz-keyframes highlight {
from { background-color: #dff0d8;}
to {background-color: white;}
}
// end .success-highlight-animation
/*********************************************/
/*********************************************/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>click</button>


<div>
When the button is clicked this shows a highlight that slowly fades away.
</div>

最佳答案

这是因为您在每次点击时都会切换类(class),第一次点击会开启类(class),第二次点击会关闭类(class)。

您应该在 2 秒后自动将其关闭,以便下次单击该按钮时,它可以再次将其打开。

$('button').on('click', function(){
$('div').addClass("success-highlight-animation");
window.setTimeout(function(){
$('div').removeClass('success-highlight-animation');
}, 2000);
});

关于javascript - 突出显示动画仅在每隔一次单击按钮时起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40641854/

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