JQuery DIVを表示/非表示にする

Question

divをデフォルトで非表示にしていますが、リンクをクリックすると表示されます（表示されます）。これは正常に動作しますが、divも点滅します。

ここ

は、私たちは

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

上記のリンクをクリックしたときに表示するdivの今

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

に隠されたdiv要素を示すために、

テキストリンクを持っているものです10

そして今、jQueryのスクリプト

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

</script> 

事はdiv要素は、それが示したときにそれを点滅させるためにどのように...私はリンクをクリックしたとき、それはdiv要素を表示、非表示を開始しますが点滅していないということでしょうか？例えば

Answer 1

あなたはあなたのショーの機能は、タイマーを削除し、フェードイン/アウト使用して変更することができます。

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 2

There is a nice blink plugin for jquery, try it

：

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

Answer 3

ねえ、なぜあなたはjQueryのトグル機能を必要としませんか？いけないあなたが「点滅」によって何を意味するか知っているが、ここであなたが望むものにする方法についてのアイデアです

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

：あなたの例では

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

はdiv要素を示し、それに隠れることはありません点滅する。 jquery.delay（）を使用して瞬き効果を作成できます。

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

Answer 6

このソリューションでは、追加の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>

Answer 7

私が代わりにJSのアニメーションCSS3ソリューションを好きなように、私の例では、どのようにそこにありますそれを解決する。すべてのブラウザで動作するわけではありませんが、このタイプのアニメーションではまだまだ小さな問題です。

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>