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

【问题标题】：Jquery show / hide DIV and make it blink when it showJquery显示/隐藏DIV并在显示时使其闪烁
【发布时间】：2016-12-25 22:11:18
【问题描述】：

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

【问题讨论】：

眨眼是什么意思？换背景？边界？
也许试试这个 $(this).effect("highlight", {}, 3000);

标签： javascript php jquery html css

【解决方案1】：

There is a nice blink plugin for jquery, try it

例如：

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

【讨论】：

【解决方案2】：

嘿，为什么你不需要 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>

【讨论】：

【解决方案3】：

不知道“眨眼”是什么意思，但这里有一个关于如何制作任何你想要的东西的想法：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

您可以更改显示功能，移除计时器并使用淡入/淡出：

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

sn-p：

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>

【讨论】：