Text blinkt jQuery
Was ist ein einfacher Weg, um Text in jQuery zum Blinken zu bringen und ihn zu stoppen? Muss für IE, FF und Chrome funktionieren. Vielen Dank
Versuchen Sie es mit diesem Blink-Plugin
Zum Beispiel
$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink(100); // causes a 100ms blink interval.
Es ist auch ein sehr einfaches Plugin, und Sie könnten es möglicherweise erweitern, um die Animation zu stoppen und bei Bedarf zu starten.
Ein Plugin zum Blinken klingt für mich nach einem Overkill ...
Versuche dies...
$('.blink').each(function() {
var elem = $(this);
setInterval(function() {
if (elem.css('visibility') == 'hidden') {
elem.css('visibility', 'visible');
} else {
elem.css('visibility', 'hidden');
}
}, 500);
});
hier blinkt die Animation:
$(".blink").animate({opacity:0},200,"linear",function(){
$(this).animate({opacity:1},200);
});
geben Sie einfach eine Blink-Klasse, was immer Sie blinken möchten:
<div class="someclass blink">some text</div>
alle grüße an DannyZB auf #jquery
eigenschaften:
- benötigt keine Plugins (aber JQuery selbst)
- macht das Ding
Wenn Sie jQuery lieber nicht verwenden, können Sie dies mit CSS3 erreichen
@-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;
}
Scheint in Chrome zu funktionieren, obwohl ich dachte, ich hätte ein leichtes Schluchzen gehört.
Kombinieren Sie die obigen Codes, ich denke, das ist eine gute Lösung.
function blink(selector){
$(selector).animate({opacity:0}, 50, "linear", function(){
$(this).delay(800);
$(this).animate({opacity:1}, 50, function(){
blink(this);
});
$(this).delay(800);
});
}
Zumindest funktioniert es auf meinem Web . http://140.138.168.123/2y78%202782
Hier ist meins ; Es gibt Ihnen die Kontrolle über die 3 wichtigen Parameter:
- die Geschwindigkeit schwinden
- die Ausblendgeschwindigkeit
- die Wiederholungsgeschwindigkeit
.
setInterval(function() {
$('.blink').fadeIn(300).fadeOut(500);
}, 1000);
Sie können auch die Standard-CSS-Methode verwenden (kein JQuery-Plugin erforderlich, jedoch mit allen Browsern kompatibel):
// Start blinking
$(".myblink").css("text-decoration", "blink");
// Stop blinking
$(".myblink").css("text-decoration", "none");
Sie können diese auch ausprobieren:
<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>
Dies ist der EINFACHSTE Weg (und mit der geringsten Codierung):
setInterval(function() {
$( ".blink" ).fadeToggle();
}, 500);
Nun, wenn Sie nach etwas anspruchsvollerem suchen ...
//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);
$.fn.blink = function(times, duration) {
times = times || 2;
while (times--) {
this.fadeTo(duration, 0).fadeTo(duration, 1);
}
return this;
};
Hier finden Sie ein jQuery blink plugin mit seiner schnellen demo .
Grundlegendes Blinken (unbegrenztes Blinken, Blinkperiode ~ 1 Sek.):
$('selector').blink();
Bei einer fortgeschritteneren Verwendung können Sie alle Einstellungen überschreiben:
$('selector').blink({
maxBlinks: 60,
blinkPeriod: 1000, // in milliseconds
onBlink: function(){},
onMaxBlinks: function(){}
});
Dort können Sie die maximale Anzahl der Blinksignale angeben und auf einige Rückrufe zugreifen: onBlink und onMaxBlinks, die ziemlich selbsterklärend sind.
Funktioniert in IE 7 & 8, Chrome, Firefox, Safari und wahrscheinlich in IE 6 und Opera (obwohl sie noch nicht getestet wurden).
(In voller Offenbarung: Ich bin der Schöpfer dieses Vorgängers. Wir hatten das legitime Bedürfnis, es bei der Arbeit zu verwenden [Ich weiß, wir alle sagen das gerne :-)] für einen Alarm innerhalb eines System und ich dachte daran, only für einen legitimen Bedarf zu teilen ;-)).
Hier ist eine weitere Liste der jQuery-Blink-Plugins .
dieser Code ist für mich Arbeit
$(document).ready(function () {
setInterval(function(){
$(".blink").fadeOut(function () {
$(this).fadeIn();
});
} ,100)
});
Sie können den jQuery UI Pulsate-Effekt ausprobieren:
Diese eigenständige Lösung blinkt den Text eine bestimmte Anzahl von Malen und stoppt dann.
Beim Blinken wird die Deckkraft verwendet, anstatt zu zeigen/verbergen, zu blenden oder umzuschalten, sodass das DIV anklickbar bleibt, falls dies ein Problem ist (ermöglicht das Erstellen von Schaltflächen mit blinkendem Text).
jsFiddle here (enthält zusätzliche Kommentare)
<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>
Quellen:
Danny Gimenez
Moses Christian
<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>
Ich wollte die steps-Timed Polyfill veröffentlichen, aber dann fiel mir ein, dass ich diesen Effekt wirklich nicht sehen möchte, also…
function blink(element, interval) {
var visible = true;
setInterval(function() {
visible = !visible;
element.style.visibility = visible ? "visible" : "hidden";
}, interval || 1000);
}
$(".myblink").css("text-decoration", "blink");
funktioniert nicht mit IE 7 & Safari. Funktioniert gut mit Firefox
Ich denke, das Folgende ist von größerer Klarheit und Anpassung als andere Antworten.
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;
}
Text Blinken Start und Stopp beim Klicken auf -
<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>
Einfachster Weg:
$(".element").fadeTo(250, 0).fadeTo(250,1).fadeTo(250,0).fadeTo(250,1);
Sie können dies beliebig oft wiederholen oder innerhalb einer Schleife verwenden. Der erste Parameter von fadeTo () gibt die Dauer an, für die der Fade wirksam werden soll, und der zweite Parameter ist die Opazität.
In der Tat ist ein Plugin für einen einfachen Blink-Effekt ein Overkill. Nachdem ich mit verschiedenen Lösungen experimentiert hatte, habe ich zwischen einer Zeile Javascript und einer CSS-Klasse ausgewählt, die genau steuert, wie ich die Elemente blinzeln möchte (in meinem Fall muss der Blink funktionieren, ich muss nur den Hintergrund auf transparent setzen, damit der Text ist noch sichtbar):
JS:
$(document).ready(function () {
setInterval(function () { $(".blink").toggleClass("no-bg"); }, 1000);
});
CSS:
span.no-bg {
background-color: transparent;
}
Vollständiges Beispiel bei dieser js Geige .
Die Anzahl der Ansichten zu dieser Frage und das Fehlen von Antworten, die sowohl das Blinken als auch das Stoppen einschließen, werden hier angezeigt: try jQuery.blinker out ( demo ).
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();
}
});
Blinkt!
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();
Die Blink-Funktionalität kann mit einfachem Javascript implementiert werden, keine Notwendigkeit für ein Jquery-Plugin oder sogar für Jquery.
Dies funktioniert in allen Browsern, da es die Grundfunktionen verwendet
Hier ist der Code
HTML:
<p id="blinkThis">This will blink</p>
JS-Code:
var ele = document.getElementById('blinkThis');
setInterval(function () {
ele.style.display = (ele.style.display == 'block' ? 'none' : 'block');
}, 500);
und eine Arbeitsfiedel
Durch diesen Code werden die Elemente blink effektiv gemacht, ohne das Layout zu berühren (wie fadeIn().fadeOut() dies tun würde), indem sie nur auf die Deckkraft einwirken. Dahin gehts, blinkender Text; verwendbar für gut und böse :)
setInterval(function() {
$('.blink').animate({ opacity: 1 }, 400).animate({ opacity: 0 }, 600);
}, 800);
Einige dieser Antworten sind ziemlich kompliziert, dies ist etwas einfacher:
$.fn.blink = function(time) {
var time = typeof time == 'undefined' ? 200 : time;
this.hide(0).delay(time).show(0);
}
$('#msg').blink();
Das ist es, was am besten für mich funktioniert hat. Ich habe jQuery fadeTo verwendet, da es sich hierbei um WordPress handelt, in dem jQuery bereits eingebunden ist. Ansonsten hätte ich mich wahrscheinlich für reines JavaScript entschieden, bevor Sie eine weitere http-Anfrage für ein Plugin hinzufügen.
$(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);
});
Ich habe eine einfache Jquery-Erweiterung für Textblinken geschrieben und dabei angegeben, wie oft der Text blinken soll. Hoffe, er hilft anderen.
//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);
Ich mag die Antwort von alex, daher handelt es sich hier um eine Erweiterung des Intervalls ohne Intervall (da Sie das Intervall schließlich löschen müssen und wissen müssen, wann eine Schaltfläche aufhört zu blinken.) Dies ist eine Lösung, bei der Sie das Jquery-Element übergeben , die gewünschte ms für den blinkenden Offset und wie oft das Element blinken soll:
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));
}
}
Dieser Code kann zu diesem Thema hilfreich sein. Einfach und doch nützlich.
<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>