文本闪烁jQuery
什么是一个简单的方法，使文本在jQuery中闪烁，并阻止它的方式？ 必须为IE，FF和Chrome工作。 谢谢
尝试使用这个blink插件
例如
$('.blink').blink(); // default is 500ms blink interval. //$('.blink').blink(100); // causes a 100ms blink interval. 这也是一个非常简单的插件，你可以扩展它来停止animation并按需启动。
一个插件闪烁一些文字听起来有点像矫枉过正的我…
尝试这个…
$('.blink').each(function() { var elem = $(this); setInterval(function() { if (elem.css('visibility') == 'hidden') { elem.css('visibility', 'visible'); } else { elem.css('visibility', 'hidden'); } }, 500); });
这里闪烁着animation：
$(".blink").animate({opacity:0},200,"linear",function(){ $(this).animate({opacity:1},200); });
只要给你一个眨眼类，无论你想眨眼：
<div class="someclass blink">some text</div>
所有关于#jquery的DannyZB
特征：
- 不需要任何插件（但JQuery本身）
- 做的事情
如果你不想使用jQuery，这可以用CSS3来实现
@-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; }
似乎在Chrome中工作，但我想我听到了轻微的抽泣声。
结合上面的代码，我认为这是一个很好的解决scheme。
function blink(selector){ $(selector).animate({opacity:0}, 50, "linear", function(){ $(this).delay(800); $(this).animate({opacity:1}, 50, function(){ blink(this); }); $(this).delay(800); }); }
至less它在我的网站上工作。 http://140.138.168.123/2y78%202782
这是我的; 它可以让你控制三个重要的参数：
- 速度的退步
- 淡出的速度
-
重复的速度
function pulse() { $('.blink').fadeIn(300); $('.blink').fadeOut(500); } setInterval(pulse, 1000);
你也可以试试这些：
<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>
您也可以使用标准的CSS方式（不需要JQuery插件，但与所有浏览器兼容）：
// Start blinking $(".myblink").css("text-decoration", "blink"); // Stop blinking $(".myblink").css("text-decoration", "none");
W3C链接
$.fn.blink = function(times, duration) { times = times || 2; while (times--) { this.fadeTo(duration, 0).fadeTo(duration, 1); } return this; };
这是最简单的方法（并且编码最less）：
setInterval(function() { $( ".blink" ).fadeToggle(); }, 500);
小提琴
现在，如果你正在寻找更复杂的东西…
//Blink settings var blink = { obj: $(".blink"), timeout: 15000, speed: 1000 }; //Start function blink.fn = setInterval(function () { blink.obj.fadeToggle(blink.speed); }, blink.speed + 1); //Ends blinking, after 'blink.timeout' millisecons setTimeout(function () { clearInterval(blink.fn); //Ensure that the element is always visible blink.obj.fadeIn(blink.speed); blink = null; }, blink.timeout);
小提琴
在这里你可以find一个jQuery blink插件及其快速演示 。
基本闪烁（ 无限闪烁，闪烁周期〜1秒 ）：
$('selector').blink();
在更高级的用法上，您可以覆盖任何设置：
$('selector').blink({ maxBlinks: 60, blinkPeriod: 1000, // in milliseconds onBlink: function(){}, onMaxBlinks: function(){} });
在那里你可以指定最大的闪烁次数，并且可以访问几个callbackonBlink ： onBlink和onMaxBlinks ，这些都是非常明显的。
适用于IE 7和8，Chrome浏览器，火狐浏览器，Safari浏览器以及IE 6和Opera（尽pipe还没有testing过）。
（完全披露：我是前一个创build者，我们有合理的需要在工作中使用它（ 我知道我们都喜欢这样说:-) ]在系统中发出警报，我想共享只用于合法需要;-)）。
这里是另一个jQuery blink插件列表。
这个代码适合我
$(document).ready(function () { setInterval(function(){ $(".blink").fadeOut(function () { $(this).fadeIn(); }); } ,100) });
你可以试试jQuery UI Pulsate特效：
$(".myblink").css("text-decoration", "blink");
不要使用IE 7和Safari。 与Firefox工作良好
此独立解决scheme将使文本闪烁指定的次数，然后停止。
闪烁使用不透明度，而不是显示/隐藏，淡入淡出或切换，以便DIV保持可点击，以防万一这是一个问题（允许您使button闪烁文字）。
jsFiddle这里 （包含额外的评论）
<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++; 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 >= 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>
资料来源：
丹尼Gimenez
摩西基督徒
链接到作者
<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>
我准备发表steps polyfill，但是我记得我真的不想看到这个效果，所以…
function blink(element, interval) { var visible = true; setInterval(function() { visible = !visible; element.style.visibility = visible ? "visible" : "hidden"; }, interval || 1000); }
我觉得以下是比其他答案更清晰和定制。
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+=1; }
闪烁！
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();
这个代码可能有助于这个话题。 简单但有用。
<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>
我喜欢亚历克斯的答案，所以这是一个没有间隔的扩展（因为你需要最终清除这个时间间隔，并知道你想要一个button停止闪烁。这是一个解决scheme，你传递的jQuery元素，闪烁偏移所需的毫秒数以及要闪烁的次数：
function blink ($element, ms, times) { for (var i = 0; i < times; i++) { window.setTimeout(function () { if ($element.is(':visible')) { $element.hide(); } else { $element.show(); } }, ms * (times + 1)); } }
其中一些答案相当复杂，这有点简单：
$.fn.blink = function(time) { var time = typeof time == 'undefined' ? 200 : time; this.hide(0).delay(time).show(0); } $('#msg').blink();
看到这个问题的观点数量，以及缺乏闪烁和停止的答案，这里是：尝试jQuery.blinker出（ 演示 ）。
HTML：
<p>Hello there!</p>
JavaScript的：
var p = $("p"); p.blinker(); p.bind({ // pause blinking on mouseenter mouseenter: function(){ $(this).data("blinker").pause(); }, // resume blinking on mouseleave mouseleave: function(){ $(this).data("blinker").blinkagain(); } });
事实上，一个简单的眨眼效果插件是矫枉过正。 因此，在尝试了各种解决scheme之后，我select了一行javascript和一个CSS类，它们完全控制了我想如何闪烁元素（在我的情况下，眨眼工作，我只需要改变背景透明，所以文字仍然可见）：
JS：
$(document).ready(function () { setInterval(function () { $(".blink").toggleClass("no-bg"); }, 1000); });
CSS：
span.no-bg { background-color: transparent; }
完整的例子在这个js小提琴 。
眨眼function可以通过普通的javascript实现，不需要jquery插件甚至jquery。
这将在所有的浏览器 ，因为它正在使用的基本function
这是代码
HTML：
<p id="blinkThis">This will blink</p>
JS代码：
var ele = document.getElementById('blinkThis'); setInterval(function () { ele.style.display = (ele.style.display == 'block' ? 'none' : 'block'); }, 500);
和一个工作小提琴
这就是最好的工作。 我使用jQuery的fadeTo，因为这是WordPress的，它已经链接到jQuery。否则，我可能会select纯JavaScript的东西，然后再添加一个插件的http请求。
$(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); });
我已经写了一个简单的jQuery扩展文本闪烁，同时指定次数，它应该闪烁的文字，希望它可以帮助别人。
//add Blink function to jquery jQuery.fn.extend({ Blink: function (i) { var c = i; if (i===-1 || 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);
文本闪烁开始和停止点击button –
<input type="button" id="btnclick" value="click" /> var intervalA; var intervalB; $(document).ready(function () { $('#btnclick').click(function () { blinkFont(); setTimeout(function () { clearInterval(intervalA); clearInterval(intervalB); }, 5000); }); }); function blinkFont() { document.getElementById("blink").style.color = "red" document.getElementById("blink").style.background = "black" intervalA = setTimeout("blinkFont()", 500); } function setblinkFont() { document.getElementById("blink").style.color = "black" document.getElementById("blink").style.background = "red" intervalB = setTimeout("blinkFont()", 500); } </script> <div id="blink" class="live-chat"> <span>This is blinking text and background</span> </div>
最简单的方法：
$(".element").fadeTo(250, 0).fadeTo(250,1).fadeTo(250,0).fadeTo(250,1);
你可以根据需要重复这个，或者你可以在循环中使用它。 fadeTo（）的第一个参数是渐变生效的持续时间，第二个参数是不透明度。
从核心jQueryfunction还有一个（它可能会更好）：
function blink( el ) { if (!el) { el = this } $(el).animate( { opacity: 0.5 },1200, function() { $(this).animate( {opacity: 1 }, 1200, blink ); } ); }
你可以调整animation的不透明度变化（0.5-1）和延迟（1200）来获得更好的“闪烁”。 这个比90年代的眨眼要less一些烦恼:-)
