Jquery zeigen/verbergen DIV und es blinken lassen, wenn es

Question

Ich erstellen einen div default ausgeblendet und wenn ich einen Link klicken, zeigt (Anzeige) eine Warnung div, das funktioniert gut, aber ich möchte das div zu blinken

Hier ist, was ich

Der Textlink haben die div

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

nun die versteckten div angezeigt zu zeigen, wenn wir auf den Link oben

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

klicken 10

Und nun das JQuery-Skript

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

</script> 

Die Sache ist die, dass die div versteckt beginnt, wenn ich auf den Link klicken, um es den div zeigen aber nicht blinkt ... Wie es zu machen blinken, wenn es zeigt?

Answer 1

Sie können Ihre Show-Funktion entfernen Sie den Timer ändern und mit FadeIn/out:

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

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

Answer 2

There is a nice blink plugin for jquery, try it

Zum Beispiel:

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

Answer 3

Hey, warum brauchen Sie nicht Jquery Toggle-Funktion?

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 4

Dont wissen, was Sie von ‚Blinzeln‘ bedeuten, aber hier ist eine Idee, wie etwas machen Sie wollen:

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 5

In Ihrem Beispiel die div zeigen, aber verstecken nie blinken. Sie können jquery.delay() verwenden, um den Blink-Effekt zu erzeugen.

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

Answer 6

Diese Lösung auf die zusätzliche jQuery UI-Bibliothek setzt:

$('.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>

Answer 7

Als ich CSS3 Lösungen statt js Animationen mögen, gibt es mein Beispiel, wie um es zu lösen. Es wird nicht für jeden Browser funktionieren, aber es ist immer noch ein kleines Problem für diese Art von Animationen.

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>