代码之家 › 专栏 › 技术社区 › zerohedge

javascript/jquery:在第一次Ajax调用成功时开始“闪烁”,在下一次调用时停止

jquery javascript

zerohedge · 技术社区 · 8 年前

我试图实现一种“闪烁”的效果,向用户发出一个后台任务正在发生的信号:当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);
            }
        }

2 回复 | 直到 8 年前

Chaska 8 年前

看起来问题是 $(this).fadeIn(300); , the $(this) 不包含在所选元素中…

if (do_animate) {
  $(selector).fadeOut(300, function () {
    $(this).fadeIn(300, function () {
      should_blink(this, do_animate);
    });
  });
} else {
  // $(this).fadeIn(300);
  $(selector).fadeIn(300);
}

zerohedge 8 年前

我用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 触发动画。