我正在尝试实现一种“闪烁”效果,以向用户发出信号,表明正在执行后台任务:在进行Ajax调用时,该按钮会悬停/闪烁,并在完成后恢复为完全不透明。但是,我得到的结果很奇怪且不一致。我最接近的是:
// globals are bad, I know
should_blink = true
// right before Ajax call
should_blink('#my-button', do_animate);
// inside Ajax call success
do_animate = false;
should_blink('#my-button', do_animate);
function should_blink(selector, do_animate) {
console.log(do_animate);
if (do_animate) {
$(selector).fadeOut(300, function () {
$(this).fadeIn(300, function () {
should_blink(this, do_animate);
})})}
else {
$(this).fadeIn(300);
}
}
我通过使用CSS以更简单的方式解决了这个问题blink
:
@-webkit-keyframes blinker {
from {opacity: 1.0;}
to {opacity: 0.0;}
}
.blink{
text-decoration: blink;
-webkit-animation-name: blinker;
-webkit-animation-duration: 0.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate;
}
然后,我使用jquery的AddClass
并RemoveClass
触发动画。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句