Jquery显示/隐藏DIV，并使其闪烁时，它显示

Jquery show / hide DIV and make it blink when it show

本文关键字：显示 闪烁 隐藏 DIV Jquery      更新时间：2023-09-26

我正在创建一个默认隐藏的div，当我点击链接时，它会显示(显示)一个警告div，这很好，但我希望div也会闪烁

这是我的

显示div 的文本链接
<a class="buttons" href="#" onclick="show(this)">join us</a>
当我们点击 上面的链接时显示的隐藏div
<div id="warning" style="display:none;">SHOW THIS DIV ...</div>
现在是JQuery脚本 
<script>
    function show(x){
        $('#warning').show();
        setInterval(blink, 100);
    };
</script>

事情是，div开始隐藏时，我点击链接，它显示div，但不眨眼…如何让它在显示时闪烁?

你可以改变你的show函数，删除定时器，并使用淡出:

    function show(x){
        $('#warning').show().fadeOut(100, function(){
            $(this).fadeIn(100, function(){
                show(this);
            });
        });
    };

代码片段:

function show(x){
  $('#warning').show().fadeOut(100, function(){
    $(this).fadeIn(100, function(){
      show(this);
    });
  });
};
function stop(x) {
  $('#warning').stop();
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<a class="buttons" href="#" onclick="show(this)">join us</a>
<a class="buttons" href="#" onclick="stop(this)">Stop blinking</a>
<div id="warning" style="display:none;">SHOW THIS DIV ...</div>

因为我喜欢CSS3解决方案而不是js动画，这里有我的例子如何解决它。并不是所有的浏览器都能正常工作，但是对于这种类型的动画来说，这仍然是一个小问题。

function show(x) {
  $('#warning').addClass('show');
};
@keyframes example {
    0%   {opacity: 1;}
    25%  {opacity: 0;}
    50%  {opacity: 1;}
    75%  {opacity: 0;}
    100% {opacity: 1;}
}
#warning {
  position:absolute;
  top:-20000px;
  left:-20000px;
  opacity:0;
}
#warning.show {
  position:static;
  animation: example 1s linear 250ms;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="buttons" href="#" onclick="show(this)">join us</a>
<div id="warning">SHOW THIS DIV ...</div>

有一个不错的jquery blink插件，试试吧

例如:

$('#warning').blink();

为什么不需要Jquery的切换功能?

function show(x){
        setInterval( toggle, 100);
    };
function toggle(){
$('#warning').toggle()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a class="buttons" href="#" onclick="show(this)">join us</a>
<div id="warning" style="display:none;">SHOW THIS DIV ...</div>

我不知道你说的" blink "是什么意思，但这里有一个关于如何做出任何你想要的东西的想法:

function show(x){
    var $warning = $('#warning');
    $warning.show();
    setInterval(function(){
       if (!$warning.data('red')) { //if it's not red, make it red
          $warning.css('background-color', 'red');
          $warning.data('red', true);
       } else { //if it's red, make it transparent
          $warning.css('background-color', 'transparent');
          $warning.data('red', null);
       }
    }, 500);
};

在您的示例中显示div，但从不隐藏眨眼。你可以使用jquery.delay()来实现闪烁效果。

<script> 
   function show(x){ 
      $('#warning').show().delay(500).hide();
     setTimeout(show, 500); 
  };

这个解决方案依赖于额外的jQuery UI库:

$('.buttons').on('click', function() {
  $("#warning").effect("pulsate", 1000, function() {
    $(this).show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<a class="buttons" href="#">join us</a>
<div id="warning" style="display:none;">SHOW THIS DIV ...</div>

相关文章：