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

Question

我正在创建一个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开始隐藏...如何让它在显示时闪烁？

Answer 1

因为我喜欢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> 

Answer 2

您可以更改show功能，删除计时器并使用fadein / out：

    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> 

Answer 3

jquery有一个很好的blink插件，试试吧

例如：

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

Answer 4

嘿，为什么你不需要Jquery Toggle功能？

 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> 

Answer 5

不知道'闪烁'是什么意思，但这里有关于如何制作任何你想要的东西的想法：

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

Answer 6

在你的例子中显示div，但从不隐藏闪烁。 您可以使用jquery.delay（）来产生闪烁效果。

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

Answer 7

此解决方案依赖于额外的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>