使一个 div 只闪烁一次

Question

我想让我的 div 在特定的点击事件中闪烁或突出显示一次。我尝试了以下代码

function blink() {
   var f = document.getElementById('divId');
   setInterval(function() {
      f.style.display = (f.style.display == 'none' ? '' : 'none');
   }, 500);
}

但我一直在眨眼。我只想使用 JavaScript。有线索吗？

原文由 sahana 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

了解JavaScript中两个定时器函数的使用：

• setTimeout - 在指定时间后执行一次。
• setInterval - 每隔指定时间做无限次。

只需将 setTimeout 替换为 setInterval ：

 function blink() {
   var f = document.getElementById('divId');
   setTimeout(function() {
      f.style.display = (f.style.display == 'none' ? '' : 'none');
   }, 500);
}

或者，如果你想让它真正 闪烁，就这样做，因为上面的只是翻转一次，你需要做两次：

 function blink() {
   var f = document.getElementById('divId');
   setTimeout(function() {
      f.style.display = (f.style.display == 'none' ? '' : 'none');
   }, 500);
   setTimeout(function() {
      f.style.display = (f.style.display == 'none' ? '' : 'none');
   }, 1000);
}

如果不是两次，请嵌套使用它：

 function blink() {
   var f = document.getElementById('divId');
   setTimeout(function() {
      f.style.display = (f.style.display == 'none' ? '' : 'none');
       setTimeout(function() {
          f.style.display = (f.style.display == 'none' ? '' : 'none');
       }, 500);
   }, 500);
}

查看这两个功能的计时功能和秒数。

---

更新

页面加载后，OP 似乎想要黄色淡入淡出效果：

 $(function () {
  $("#fade-it").delay(150).animate({
    "background-color": "#fc9"
  }, 350, function () {
    $("#fade-it").animate({
      "background-color": "#fff"
    }, 200);
  });
});

 * {font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0; list-style: none;}
#fade-it {padding: 15px; text-align: center;}

 <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="fade-it">
  Welcome!
</div>

注意： 我为此使用了 jQuery 和 jQuery UI，我们也可以在纯 CSS 中执行。

---

更新： 使用纯 CSS 动画。

 * {
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
  list-style: none;
}
#fade-it {
  padding: 15px;
  text-align: center;
}
@-webkit-keyframes yellow-fade {
  from {
    background: #f96;
  }
  to {
    background: #fff;
  }
}
@-moz-keyframes yellow-fade {
  from {
    background: #f96;
  }
  to {
    background: #fff;
  }
}
@keyframes yellow-fade {
  from {
    background: #f96;
  }
  to {
    background: #fff;
  }
}
#fade-it {
  -webkit-animation: yellow-fade 1s ease-in-out 0s;
  -moz-animation: yellow-fade 1s ease-in-out 0s;
  -o-animation: yellow-fade 1s ease-in-out 0s;
  animation: yellow-fade 1s ease-in-out 0s;
}

 <div id="fade-it">
  Welcome!
</div>

原文由 Praveen Kumar Purushothaman 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这里的解决方案。

请按照下面的代码。首先制作 CSS 以实现淡入淡出效果，然后在点击功能上将“fadeIn”类添加到特定的“div”。

  @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
  -webkit-animation: fadeIn 1s ease-in-out 0s;
  -moz-animation: fadeIn 1s ease-in-out 0s;
  -o-animation: fadeIn 1s ease-in-out 0s;
   animation: fadeIn 1s ease-in-out 0s;
}

并在点击事件发生时添加类“淡入”。

原文由 Srikanth Reddy 发布，翻译遵循 CC BY-SA 4.0 许可协议