blocks|key|1425835|text|Try+using+this+blink+plugin|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1425836|例如|1425837|$('.blink').blink();+//+default+is+500ms+blink+interval.
//$('.blink').blink(100);+//+causes+a+100ms+blink+interval.|code-block|syntax|javascript|1425838|它也是一个非常简单的插件，你可以扩展它来停止动画和按需启动它。|1425839|entityMap|0|LINK|mutability|MUTABLE|url|http://antiyes.com/2009/08/24/jquery-blink-plugin/^0|0|R|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p><a href="http://antiyes.com/2009/08/24/jquery-blink-plugin/" rel="noreferrer">Try using this blink plugin</a></p>

<p>For Example</p>

<pre><code>$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink(100); // causes a 100ms blink interval.
</code></pre>

<p>It is also a very simple plugin, and you could probably extend it to stop the animation and start it on demand.</p>


blocks|key|1426028|text|一个使文本闪烁的插件对我来说听起来有点过头了…|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1426029|试试这个。|1426030|$('.blink').each(function()+{
++++var+elem+=+$(this);
++++setInterval(function()+{
++++++++if+(elem.css('visibility')+==+'hidden')+{
++++++++++++elem.css('visibility',+'visible');
++++++++}+else+{
++++++++++++elem.css('visibility',+'hidden');
++++++++}++++
++++},+500);
});|code-block|syntax|javascript|1426031|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>A plugin to blink some text sounds a bit like overkill to me...</p>

<p>Try this...</p>

<pre><code>$('.blink').each(function() {
    var elem = $(this);
    setInterval(function() {
        if (elem.css('visibility') == 'hidden') {
            elem.css('visibility', 'visible');
        } else {
            elem.css('visibility', 'hidden');
        }    
    }, 500);
});
</code></pre>


blocks|key|1211269|text|如果您不希望使用jQuery，可以使用CSS3来实现|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1211270|@-webkit-keyframes+blink+{++
++from+{+opacity:+1.0;+}
++to+{+opacity:+0.0;+}
}

blink+{
++-webkit-animation-name:+blink;++
++-webkit-animation-iteration-count:+infinite;++
++-webkit-animation-timing-function:+cubic-bezier(1.0,0,0,1.0);
++-webkit-animation-duration:+1s;+
}|code-block|syntax|javascript|1211271|似乎能在Chrome中工作，不过我想我听到了轻微的抽咽声。|1211272|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If you'd rather not use jQuery, this can be achieved with CSS3</p>

<pre><code>@-webkit-keyframes blink {  
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

blink {
  -webkit-animation-name: blink;  
  -webkit-animation-iteration-count: infinite;  
  -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  -webkit-animation-duration: 1s; 
}
</code></pre>

<p>Seems to work in Chrome, though I thought I heard a slight sobbing noise.</p>


blocks|key|1426238|text|结合上面的代码，我认为这是一个很好的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1426239|function+blink(selector){
++++$(selector).animate({opacity:0},+50,+"linear",+function(){
++++++++$(this).delay(800);
++++++++$(this).animate({opacity:1},+50,+function(){
++++++++blink(this);
++++++++});
++++++++$(this).delay(800);
++++});
}|code-block|syntax|javascript|1426240|至少它能在我的网站上工作。http://140.138.168.123/2y78%25202782|offset|length|1426241|entityMap|0|LINK|mutability|MUTABLE|url|http://140.138.168.123/2y78%25202782^0|0|0|D|Y|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Combine the codes above, I think this is a good solution.</p>

<pre><code>function blink(selector){
    $(selector).animate({opacity:0}, 50, "linear", function(){
        $(this).delay(800);
        $(this).animate({opacity:1}, 50, function(){
        blink(this);
        });
        $(this).delay(800);
    });
}
</code></pre>

<p>At least it works on my web.
<a href="http://140.138.168.123/2y78%202782" rel="noreferrer">http://140.138.168.123/2y78%202782</a></p>


blocks|key|1425919|text|你也可以使用标准的CSS方式(不需要JQuery插件，但与所有浏览器兼容)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1425920|//+Start+blinking
$(".myblink").css("text-decoration",+"blink");

//+Stop+blinking
$(".myblink").css("text-decoration",+"none");|code-block|syntax|javascript|1425921|W3C+Link|offset|length|1425922|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/WAI/UA/TS/html401/cp0303/0303-CSS-BLINK.html^0|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>You can also use the standard CSS way (no need for JQuery plugin, but compatible with all browsers):</p>

<pre><code>// Start blinking
$(".myblink").css("text-decoration", "blink");

// Stop blinking
$(".myblink").css("text-decoration", "none");
</code></pre>

<p><a href="http://www.w3.org/WAI/UA/TS/html401/cp0303/0303-CSS-BLINK.html" rel="noreferrer">W3C Link</a></p>


blocks|key|1210977|text|您还可以尝试执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1210978|<div>some+<span+class="blink">text</span>+are+<span+class="blink">blinking</span></div>
<button+onclick="startBlink()">blink</button>
<button+onclick="stopBlink()">no+blink</button>

<script>
++function+startBlink(){
++++window.blinker+=+setInterval(function(){
++++++++if(window.blink){
+++++++++++$('.blink').css('color','blue');
+++++++++++window.blink=false;
+++++++++}
++++++++else{
++++++++++++$('.blink').css('color','white');
++++++++++++window.blink+=+true;
++++++++}
++++},500);
++}

++function+stopBlink(){
++++if(window.blinker)+clearInterval(window.blinker);
++}+
</script>|code-block|syntax|javascript|1210979|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can also try these:</p>

<pre><code>&lt;div&gt;some &lt;span class="blink"&gt;text&lt;/span&gt; are &lt;span class="blink"&gt;blinking&lt;/span&gt;&lt;/div&gt;
&lt;button onclick="startBlink()"&gt;blink&lt;/button&gt;
&lt;button onclick="stopBlink()"&gt;no blink&lt;/button&gt;

&lt;script&gt;
  function startBlink(){
    window.blinker = setInterval(function(){
        if(window.blink){
           $('.blink').css('color','blue');
           window.blink=false;
         }
        else{
            $('.blink').css('color','white');
            window.blink = true;
        }
    },500);
  }

  function stopBlink(){
    if(window.blinker) clearInterval(window.blinker);
  } 
&lt;/script&gt;
</code></pre>


blocks|key|1211488|text|$.fn.blink+=+function(times,+duration)+{
++++times+=+times+%7C%7C+2;
++++while+(times--)+{
++++++++this.fadeTo(duration,+0).fadeTo(duration,+1);
++++}
++++return+this;
};|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1211489|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$.fn.blink = function(times, duration) {
    times = times || 2;
    while (times--) {
        this.fadeTo(duration, 0).fadeTo(duration, 1);
    }
    return this;
};
</code></pre>


blocks|key|1426713|text|这段代码很适合我|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1426714|+++$(document).ready(function+()+{
++++++++setInterval(function(){
++++++++++++$(".blink").fadeOut(function+()+{
++++++++++++++++$(this).fadeIn();
++++++++++++});
++++++++}+,100)
++++});|code-block|syntax|javascript|1426715|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>this code is work for me</p>

<pre><code>   $(document).ready(function () {
        setInterval(function(){
            $(".blink").fadeOut(function () {
                $(this).fadeIn();
            });
        } ,100)
    });
</code></pre>


blocks|key|1211342|text|您可以尝试jQuery+UI脉动效果：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1211343|http://docs.jquery.com/UI/Effects/Pulsate|offset|length|1211344|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|15|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

<p>You can try the jQuery UI Pulsate effect:</p>

<p><a href="http://docs.jquery.com/UI/Effects/Pulsate" rel="nofollow">http://docs.jquery.com/UI/Effects/Pulsate</a></p>


blocks|key|1426859|text|最简单的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1426860|$(".element").fadeTo(250,+0).fadeTo(250,1).fadeTo(250,0).fadeTo(250,1);|code-block|syntax|javascript|1426861|你可以想重复多少就重复多少，也可以在循环中使用它。fadeTo()的第一个参数是淡入淡出生效的持续时间，第二个参数是不透明度。|1426862|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Easiest way:</p>

<pre><code>$(".element").fadeTo(250, 0).fadeTo(250,1).fadeTo(250,0).fadeTo(250,1);
</code></pre>

<p>You can repeat this as much as you want or you can use it inside a loop. the first parameter of the fadeTo() is the duration for the fade to take effect, and the second parameter is the opacity.</p>


blocks|key|1211081|text|$(".myblink").css("text-decoration",+"blink");|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1211082|不要使用IE+7和Safari。与Firefox配合使用效果良好|unstyled|1211083|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$(".myblink").css("text-decoration", "blink");
</code></pre>

<p>do not work with IE 7 &amp; Safari. Work well with Firefox</p>


blocks|key|1426181|text|Link+to+author|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1426182|<script+type="text/javascript"+src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

<div+id="msg">+<strong><font+color="red">Awesome+Gallery+By+Anil+Labs</font></strong></p>+</div>

<script+type="text/javascript"+>
function+blink(selector){
++++$(selector).fadeOut('slow',+function(){
++++++++$(this).fadeIn('slow',+function(){
++++++++++++blink(this);
++++++++});
++++});
}

blink('#msg');
</script>|code-block|syntax|javascript|1426183|entityMap|0|LINK|mutability|MUTABLE|url|http://awesome-gallery.blogspot.com/2011/03/blinking-text-using-jquery.html^0|0|E|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p><a href="http://awesome-gallery.blogspot.com/2011/03/blinking-text-using-jquery.html" rel="nofollow">Link to author</a></p>

<pre><code>&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"&gt;&lt;/script&gt;

&lt;div id="msg"&gt; &lt;strong&gt;&lt;font color="red"&gt;Awesome Gallery By Anil Labs&lt;/font&gt;&lt;/strong&gt;&lt;/p&gt; &lt;/div&gt;

&lt;script type="text/javascript" &gt;
function blink(selector){
    $(selector).fadeOut('slow', function(){
        $(this).fadeIn('slow', function(){
            blink(this);
        });
    });
}

blink('#msg');
&lt;/script&gt;
</code></pre>


blocks|key|1211559|text|我觉得下面的答案比其他答案更清晰，更具定制化。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1211560|++++var+element_to_blink=$('#id_of_element_to_blink');
++++var+min_opacity=0.2;
++++var+max_opacity=1.0;
++++var+blink_duration=2000;
++++var+blink_quantity=10;
++++var+current_blink_number=0;

++++while(current_blink_number<blink_quantity){
++++++++element_to_blink.animate({opacity:min_opacity},(blink_duration/2),"linear");
++++++++element_to_blink.animate({opacity:max_opacity},(blink_duration/2),"linear");
++++++++current_blink_number%2B=1;
++++++++}|code-block|syntax|javascript|1211561|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I feel the following is of greater clarity and customization than other answers.<br></p>

<pre><code>    var element_to_blink=$('#id_of_element_to_blink');
    var min_opacity=0.2;
    var max_opacity=1.0;
    var blink_duration=2000;
    var blink_quantity=10;
    var current_blink_number=0;

    while(current_blink_number&lt;blink_quantity){
        element_to_blink.animate({opacity:min_opacity},(blink_duration/2),"linear");
        element_to_blink.animate({opacity:max_opacity},(blink_duration/2),"linear");
        current_blink_number+=1;
        }
</code></pre>


blocks|key|1426522|text|这个独立的解决方案将使文本闪烁指定的次数，然后停止。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1426523|闪烁使用不透明度，而不是显示/隐藏、淡入淡出或切换，以便DIV保持可点击状态，以防出现问题(允许您制作闪烁文本的按钮)。|1426524|jsFiddle+here+(包含其他注释)|offset|length|1426525|<html>
++++<head>
++++++++<script+src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

++++++++<script+type="text/javascript">
++++++++++++$(document).ready(function()+{

++++++++++++++++var+init+=+0;

++++++++++++++++$('#clignotant').click(function()+{
++++++++++++++++++++if+(init==0)+{
++++++++++++++++++++++++init%2B%2B;
++++++++++++++++++++++++blink(this,+800,+4);
++++++++++++++++++++}else{
++++++++++++++++++++++++alert('Not+document.load,+so+process+the+click+event');
++++++++++++++++++++}
++++++++++++++++});

++++++++++++++++function+blink(selector,+blink_speed,+iterations,+counter){
++++++++++++++++++++counter+=+counter+%7C+0;
++++++++++++++++++++$(selector).animate({opacity:0},+50,+"linear",+function(){
++++++++++++++++++++++++$(this).delay(blink_speed);
++++++++++++++++++++++++$(this).animate({opacity:1},+50,+function(){

++++++++++++++++++++++++++++counter%2B%2B;

++++++++++++++++++++++++++++if+(iterations+==+-1)+{
++++++++++++++++++++++++++++++++blink(this,+blink_speed,+iterations,+counter);
++++++++++++++++++++++++++++}else+if+(counter+>=+iterations)+{
++++++++++++++++++++++++++++++++return+false;
++++++++++++++++++++++++++++}else{
++++++++++++++++++++++++++++++++blink(this,+blink_speed,+iterations,+counter);
++++++++++++++++++++++++++++}
++++++++++++++++++++++++});
++++++++++++++++++++++++$(this).delay(blink_speed);
++++++++++++++++++++});
++++++++++++++++}

++++++++++++++++//This+line+must+come+*AFTER*+the+$('#clignotant').click()+function+!!
++++++++++++++++window.load($('#clignotant').trigger('click'));


++++++++++++});+//END+$(document).ready()

++++++++</script>
++++</head>
<body>

++++<div+id="clignotant"+style="background-color:#FF6666;width:500px;
++++height:100px;text-align:center;">
++++++++<br>
++++++++Usage:+blink(selector,+blink_speed,+iterations)+<br+/>
++++++++<span+style="font-weight:bold;color:blue;">if+iterations+==+-1+blink+forever</span><br+/>
++++++++Note:+fn+call+intentionally+missing+4th+param
++++</div>


</body>
</html>|code-block|syntax|javascript|1426526|资料来源：|1426527|Danny+Gimenez|1426528|Moses+Christian|1426529|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/fzhVx/|1|https://stackoverflow.com/users/2497335/daniel-gimenez|2|https://stackoverflow.com/users/983798/moses-christian^0|0|0|0|D|0|0|0|0|0|D|1|0|0|F|2|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@$F|17|G|18|1|19]]|A|$]]|$1|H|3|I|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1C|8|@]|9|@$F|1D|G|1E|1|1F]]|A|$]]|$1|Q|3|R|5|6|7|1G|8|@]|9|@$F|1H|G|1I|1|1J]]|A|$]]|$1|S|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]|12|$5|V|W|X|A|$Y|13]]]]

<p>This stand-alone solution will blink the text a specified number of times and then stop.</p>

<p>The blinking uses opacity, rather than show/hide, fade or toggle so that the DIV remains clickable, in case that's ever an issue (allows you to make buttons with blinking text).</p>

<p><a href="http://jsfiddle.net/fzhVx/" rel="nofollow noreferrer">jsFiddle here</a> (contains additional comments)</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;

        &lt;script type="text/javascript"&gt;
            $(document).ready(function() {

                var init = 0;

                $('#clignotant').click(function() {
                    if (init==0) {
                        init++;
                        blink(this, 800, 4);
                    }else{
                        alert('Not document.load, so process the click event');
                    }
                });

                function blink(selector, blink_speed, iterations, counter){
                    counter = counter | 0;
                    $(selector).animate({opacity:0}, 50, "linear", function(){
                        $(this).delay(blink_speed);
                        $(this).animate({opacity:1}, 50, function(){

                            counter++;

                            if (iterations == -1) {
                                blink(this, blink_speed, iterations, counter);
                            }else if (counter &gt;= iterations) {
                                return false;
                            }else{
                                blink(this, blink_speed, iterations, counter);
                            }
                        });
                        $(this).delay(blink_speed);
                    });
                }

                //This line must come *AFTER* the $('#clignotant').click() function !!
                window.load($('#clignotant').trigger('click'));


            }); //END $(document).ready()

        &lt;/script&gt;
    &lt;/head&gt;
&lt;body&gt;

    &lt;div id="clignotant" style="background-color:#FF6666;width:500px;
    height:100px;text-align:center;"&gt;
        &lt;br&gt;
        Usage: blink(selector, blink_speed, iterations) &lt;br /&gt;
        &lt;span style="font-weight:bold;color:blue;"&gt;if iterations == -1 blink forever&lt;/span&gt;&lt;br /&gt;
        Note: fn call intentionally missing 4th param
    &lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Sources:<br />
<a href="https://stackoverflow.com/users/2497335/daniel-gimenez">Danny Gimenez</a><br />
<a href="https://stackoverflow.com/users/983798/moses-christian">Moses Christian</a></p>


blocks|key|1211672|text|我本打算发布steps-timed+polyfill，但后来我想起来我真的不想看到这种效果，所以…|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1211673|function+blink(element,+interval)+{
++++var+visible+=+true;

++++setInterval(function()+{
++++++++visible+=+!visible;
++++++++element.style.visibility+=+visible+?+"visible"+:+"hidden";
++++},+interval+%7C%7C+1000);
}|code-block|syntax|javascript|1211674|entityMap^0|6|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>I was going to post the <code>steps</code>-timed polyfill, but then I remembered that I really don’t want to ever see this effect, so…</p>

<pre><code>function blink(element, interval) {
    var visible = true;

    setInterval(function() {
        visible = !visible;
        element.style.visibility = visible ? "visible" : "hidden";
    }, interval || 1000);
}
</code></pre>


blocks|key|1211212|text|眨眼！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1211213|var+counter+=+5;+//+Blinking+the+link+5+times
var+$help+=+$('div.help');
var+blinkHelp+=+function()+{
++++($help.is(':visible')+?+$help.fadeOut(250)+:+$help.fadeIn(250));++++
++++counter--;
++++if+(counter+>=+0)+setTimeout(blinkHelp,+500);
};
blinkHelp();|code-block|syntax|javascript|1211214|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Blinking !</p>

<pre><code>var counter = 5; // Blinking the link 5 times
var $help = $('div.help');
var blinkHelp = function() {
    ($help.is(':visible') ? $help.fadeOut(250) : $help.fadeIn(250));    
    counter--;
    if (counter &gt;= 0) setTimeout(blinkHelp, 500);
};
blinkHelp();
</code></pre>


blocks|key|1426285|text|此代码可能对此主题有所帮助。很简单，但很有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1426286|<script+type="text/javascript"+src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script+type="text/javascript">
++++$(document).ready(function(){
++++++++setInterval("$('#myID/.myClass').toggle();",500);
++++});
</script>|code-block|syntax|javascript|1426287|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This code might help to this topic. Simple, yet useful.</p>

<pre><code>&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    $(document).ready(function(){
        setInterval("$('#myID/.myClass').toggle();",500);
    });
&lt;/script&gt;
</code></pre>


blocks|key|1211428|text|其中一些答案相当复杂，这就简单了一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1211429|$.fn.blink+=+function(time)+{
++++var+time+=+typeof+time+==+'undefined'+?+200+:+time;
++++this.hide(0).delay(time).show(0);
}

$('#msg').blink();|code-block|syntax|javascript|1211430|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Some of these answers are quite complicated, this is a bit easier:</p>

<pre><code>$.fn.blink = function(time) {
    var time = typeof time == 'undefined' ? 200 : time;
    this.hide(0).delay(time).show(0);
}

$('#msg').blink();
</code></pre>


blocks|key|1426423|text|我喜欢alex的回答，所以这是一个没有间隔的扩展(因为您最终需要清除该间隔，并知道您希望按钮何时停止闪烁。这是一个解决方案，你需要传入jquery元素，你想要的闪烁偏移量的ms和你想要元素闪烁的次数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1426424|function+blink+($element,+ms,+times)+{
++++for+(var+i+=+0;+i+<+times;+i%2B%2B)+{
++++++++window.setTimeout(function+()+{
++++++++++++if+($element.is(':visible'))+{
++++++++++++++++$element.hide();
++++++++++++}+else+{
++++++++++++++++$element.show();
++++++++++++}
++++++++},+ms+*+(times+%2B+1));
++++}
}|code-block|syntax|javascript|1426425|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I like alex's answer, so this is a bit of an extension of that without an interval (since you would need to clear that interval eventually and know when you want a button to stop blinking. This is a solution where you pass in the jquery element, the ms you want for the blinking offset and the number of times you want the element to blink:</p>

<pre><code>function blink ($element, ms, times) {
    for (var i = 0; i &lt; times; i++) {
        window.setTimeout(function () {
            if ($element.is(':visible')) {
                $element.hide();
            } else {
                $element.show();
            }
        }, ms * (times + 1));
    }
}
</code></pre>


blocks|key|1426644|text|事实上，一个简单的眨眼效果的插件太夸张了。因此，在尝试了各种解决方案后，我在一行javascript和一个CSS类之间进行了选择，后者精确地控制了我希望如何闪烁元素(在我的例子中，为了使闪烁起作用，我只需要将背景更改为透明，以便文本仍然可见)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1426645|JS：|1426646|$(document).ready(function+()+{
++++++++setInterval(function+()+{+$(".blink").toggleClass("no-bg");+},+1000);
++++});|code-block|syntax|javascript|1426647|CSS：|1426648|span.no-bg+{
++++background-color:+transparent;
}|1426649|在这个js+fiddle上有完整的例子。|offset|length|1426650|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/lucd/GxG7h/^0|0|0|0|0|0|3|9|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>Indeed a plugin for a simple blink effect is overkill. So after experimenting with various solutions, I have choosen between one line of javascript and a CSS class that controls exactly how I want to blink the elements (in my case for the blink to work I only need to change the background to transparent, so that the text is still visible):</p>

<p>JS:</p>

<pre><code>$(document).ready(function () {
        setInterval(function () { $(".blink").toggleClass("no-bg"); }, 1000);
    });
</code></pre>

<p>CSS:</p>

<pre><code>span.no-bg {
    background-color: transparent;
}
</code></pre>

<p>Full example at this <a href="http://jsfiddle.net/lucd/GxG7h/" rel="nofollow">js fiddle</a>.</p>


blocks|key|1211819|text|这就是最终对我最有效的方法。我使用jQuery+fadeTo是因为它在WordPress上，它已经链接了jQuery+in。否则，在为插件添加另一个JavaScript请求之前，我可能会选择使用纯http。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1211820|$(document).ready(function()+{
++++//+One+"blink"+takes+1.5s
++++setInterval(function(){
++++++++//+Immediately+fade+to+opacity:+0+in+0ms
++++++++$(".cursor").fadeTo(+0,+0);
++++++++//+Wait+.75sec+then+fade+to+opacity:+1+in+0ms
++++++++setTimeout(function(){
++++++++++++$(".cursor").fadeTo(+0,+1);
++++++++},+750);
++++},+1500);
});|code-block|syntax|javascript|1211821|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is what ended up working best for me. I used jQuery fadeTo because this is on WordPress, which already links jQuery in.  Otherwise, I probably would have opted for something with pure JavaScript before adding another http request for a plugin.</p>

<pre><code>$(document).ready(function() {
    // One "blink" takes 1.5s
    setInterval(function(){
        // Immediately fade to opacity: 0 in 0ms
        $(".cursor").fadeTo( 0, 0);
        // Wait .75sec then fade to opacity: 1 in 0ms
        setTimeout(function(){
            $(".cursor").fadeTo( 0, 1);
        }, 750);
    }, 1500);
});
</code></pre>


blocks|key|1426821|text|我已经为文本闪烁写了一个简单的jquery扩展，同时指定它应该闪烁文本的次数，希望它能帮助其他人。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1426822|//add+Blink+function+to+jquery+
jQuery.fn.extend({
++++Blink:+function+(i)+{
++++++++var+c+=+i;+if+(i===-1+%7C%7C+c--+>+0)+$(this).fadeTo("slow",+0.1,+function+()+{+$(this).fadeTo("slow",+1,+function+()+{+$(this).Blink(c);++});+});
++++}
});
//Use+it+like+this
$(".mytext").Blink(2);+//Where+2+denotes+number+of+time+it+should+blink.
//For+continuous+blink+use+-1+
$(".mytext").Blink(-1);|code-block|syntax|javascript|1426823|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I have written a simple jquery extension for text blink whilst specifying number of times it should blink the text, Hope it helps others.</p>

<pre><code>//add Blink function to jquery 
jQuery.fn.extend({
    Blink: function (i) {
        var c = i; if (i===-1 || c-- &gt; 0) $(this).fadeTo("slow", 0.1, function () { $(this).fadeTo("slow", 1, function () { $(this).Blink(c);  }); });
    }
});
//Use it like this
$(".mytext").Blink(2); //Where 2 denotes number of time it should blink.
//For continuous blink use -1 
$(".mytext").Blink(-1);
</code></pre>


blocks|key|1212084|text|结果|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1212085|​|1212086|📷|atomic|offset|length|1212087|1212088|$('.blink').fadeIn('fast')
++++.animate({
++++++++color:+"#FFCD56"
++++},+100).animate({
++++++++color:+"white"
++++},+100)
++++.animate({
++++++++color:+"#FFCD56"
++++},+100).animate({
++++++++color:+"white"
++++},+100)
++++.animate({
++++++++color:+"#FFCD56"
++++},+100).animate({
++++++++color:+"white"
++++},+100)
++++.animate({
++++++++color:+"#FFCD56"
++++},+100).animate({
++++++++color:+"white"
++++},+100)
++++.animate({
++++++++color:+"#FFCD56"
++++},+100).animate({
++++++++color:+"white"
++++},+100);|code-block|syntax|javascript|1212089|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/cc0dd18f1def83751ad1dcf840bc6e43.gif|imageAlt^0|0|0|0|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@$G|10|H|11|1|12]]|A|$]]|$1|I|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|14|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

<h1>result</h1>
<p><img src="https://i.imgur.com/ck3fJDA.gif" alt="" /></p>
<pre><code>$('.blink').fadeIn('fast')
    .animate({
        color: &quot;#FFCD56&quot;
    }, 100).animate({
        color: &quot;white&quot;
    }, 100)
    .animate({
        color: &quot;#FFCD56&quot;
    }, 100).animate({
        color: &quot;white&quot;
    }, 100)
    .animate({
        color: &quot;#FFCD56&quot;
    }, 100).animate({
        color: &quot;white&quot;
    }, 100)
    .animate({
        color: &quot;#FFCD56&quot;
    }, 100).animate({
        color: &quot;white&quot;
    }, 100)
    .animate({
        color: &quot;#FFCD56&quot;
    }, 100).animate({
        color: &quot;white&quot;
    }, 100);
</code></pre>


blocks|key|1212100|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1212101|setInterval(+function()+{+$(".me").fadeOut(500).fadeIn(500)+}+,+500);|code-block|syntax|javascript|1212102|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this :</p>
<pre><code>setInterval( function() { $(&quot;.me&quot;).fadeOut(500).fadeIn(500) } , 500);
</code></pre>


blocks|key|1211181|text|另一个来自核心jQuery功能(它可能会更好)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1211182|function+blink(+el+)+{
++++if+(!el)+{
++++++++el+=+this
++++}

++++$(el).animate(+{+opacity:+0.5+},1200,+function()+{
++++++++$(this).animate(+{opacity:+1+},+1200,+blink+);
++++}+);
}|code-block|syntax|javascript|1211183|可以调整动画不透明度更改(0.5-+1)和延迟(1200)，以获得更好的“闪烁”效果。这张照片没有90年代的眨眼那么烦人:-)|1211184|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>One more made from the core jQuery functionality(it could be better):</p>

<pre><code>function blink( el ) {
    if (!el) {
        el = this
    }

    $(el).animate( { opacity: 0.5 },1200, function() {
        $(this).animate( {opacity: 1 }, 1200, blink );
    } );
}
</code></pre>

<p>You can tweak the animation opacity change(0.5- 1) and delay(1200) to get a better "blink". This one is less annoying than the blink of the 90es :-)</p>


blocks|key|1211295|text|$.fn.blink+=+function+(delay)+{
++delay+=+delay+%7C%7C+500;
++return+this.each(function+()+{
++++var+element+=+$(this);
++++var+interval+=+setInterval(function+()+{
++++++element.fadeOut((delay+/+3),+function()+{
++++++++element.fadeIn(delay+/+3);
++++++})
++++},+delay);
++++element.data('blinkInterval',+interval);
++});
};

$.fn.stopBlinking+=+function()+{
++return+this.each(function()+{
++++var+element+=+$(this);
++++element.stop(true,+true);
++++clearInterval(element.data('blinkInterval'));
++});
};|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1211296|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$.fn.blink = function (delay) {
  delay = delay || 500;
  return this.each(function () {
    var element = $(this);
    var interval = setInterval(function () {
      element.fadeOut((delay / 3), function() {
        element.fadeIn(delay / 3);
      })
    }, delay);
    element.data('blinkInterval', interval);
  });
};

$.fn.stopBlinking = function() {
  return this.each(function() {
    var element = $(this);
    element.stop(true, true);
    clearInterval(element.data('blinkInterval'));
  });
};
</code></pre>


blocks|key|1426346|text|基于alex+idea|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1426347|$('#selector').blink();

$.fn.blink+=+function(options)+{++++
++++options+=+$.extend({},+{'speed'+:+800},+options);

++++var+elem+=+this;
++++setInterval(function()+{
++++++++if+(!elem.is(':visible'))+{
++++++++++++elem.show();
++++++++}+else+{
++++++++++++elem.hide();
++++++++}++++
++++},+options.speed);++++++
}+++|code-block|syntax|javascript|1426348|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>based on alex idea</p>

<pre><code>$('#selector').blink();

$.fn.blink = function(options) {    
    options = $.extend({}, {'speed' : 800}, options);

    var elem = this;
    setInterval(function() {
        if (!elem.is(':visible')) {
            elem.show();
        } else {
            elem.hide();
        }    
    }, options.speed);      
}   
</code></pre>


<p>What is an easy way to make text blinking in jQuery and a way to stop it? Must work for IE, FF and Chrome. Thanks</p>


Text blinking jQuery

WordPress

jQuery

在jQuery中让文本闪烁的简单方法是什么，以及阻止它的方法是什么？必须为IE，FF和Chrome工作。谢谢

问文本闪烁jQuery
EN

回答 27

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本闪烁jQueryEN

回答 27

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本闪烁jQuery
EN