Nokelekele Nokelekele - 3 months ago 22
HTML Question

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

I am creating a div default hidden and when I click a link it show (display) a warning div, this works fine but I want the div to blink too

Here is what I have

The text link to show the div

<a class="buttons" href="#" onclick="show(this)">join us</a>


Now the hidden div to display when we click the link above

<div id="warning" style="display:none;">SHOW THIS DIV ...</div>


And now the JQuery script

<script>
function show(x){
$('#warning').show();
setInterval(blink, 100);
};

</script>


The thing is that the div starts hidden when I click on the link it show the div but does not blink... How to make it blink when it shows ?

Answer

You can change your show function removing the timer and using fadein/out:

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

The snippet:

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>

Comments