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动画，我的例子就是如何解决它。它不适用于所有浏览器，但对于这种类型的动画来说仍然是一个小问题。

＆＃13;

function show(x) {
  $('#warning').addClass('show');
};

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

摘录：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

There is a nice blink plugin for jquery, try it

例如：

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

Answer 4

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

＆＃13;

function show(x){
        setInterval( toggle, 100);
    };

function toggle(){
$('#warning').toggle()
}

＆＃13;

<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>

＆＃13;

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库：

＆＃13;

$('.buttons').on('click', function() {

  $("#warning").effect("pulsate", 1000, function() {
    $(this).show();
  });

});

＆＃13;

<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>

＆＃13;

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

7 个答案: