Question

我正在尝试实现一种“闪烁”效果，以向用户发出信号，表明正在执行后台任务：在进行Ajax调用时，该按钮会悬停/闪烁，并在完成后恢复为完全不透明。但是，我得到的结果很奇怪且不一致。我最接近的是这个：

.wrapper {
  position: absolute;
  top: 35%;
  left: -4%;
  padding: 2em 5em;
  color: #000;
  font-weight: 700;
  font-size: 150%;
}

.wrapper p {
  height: 60px;
  float: left;
  margin-right: 0.3em;
}

.wrapper .b {
  float: left;
  overflow: hidden;
  position: relative;
  height: 30px;
  top: 5px;
}

.wrapper .animationText {
  display: inline-block;
  color: #ac1101;
  position: relative;
  white-space: nowrap;
  top: 0;
  left: 0;
  animation: move 3s;
  animation-iteration-count: infinite;
  animation-delay: 2s;
}

@keyframes move {
  0%,30% {
    top: 0%;
  }
  60%,100% {
    top:-100%;
  }
}

Answer 1

问题似乎出在$(this).fadeIn(300);上，$(this)没有包含在所选元素中……

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

Answer 2

我通过使用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来触发动画。

Javascript / jQuery：在第一次AJAX调用成功时开始“闪烁”，在下一次停止

2 个答案: