Question

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

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

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

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>

Answer 2

这里的解决方案..

请遵循以下代码。首先制作淡入效果的css和点击功能，添加“淡入淡出”功能。对那个特殊的＆＃39; div＆＃39;。

 @-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;
}

并添加课程＆f; fadeIn＆＃39;当点击事件发生时。

Answer 3

＆＃13;

function flash() {
    $('.highlight').fadeOut(500);
    $('.highlight').fadeIn(500);
}

setTimeout(flash, 1000);

＆＃13;

.highlight{
	background:#red;
	border:15px solid #000;
	padding:50px;
	margin-top:25px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="highlight">Ganesh Putta</div>

＆＃13;

只进行一次div闪光

3 个答案: