Qual è un modo semplice per far lampeggiare il testo in jQuery e un modo per fermarlo? Deve funzionare per IE, FF e Chrome. Grazie
Qual è un modo semplice per far lampeggiare il testo in jQuery e un modo per fermarlo? Deve funzionare per IE, FF e Chrome. Grazie
Risposte:
Prova a utilizzare questo plug-in blink
Per esempio
$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink(100); // causes a 100ms blink interval.
È anche un plugin molto semplice e potresti probabilmente estenderlo per interrompere l'animazione e avviarlo su richiesta.
Un plugin per far lampeggiare del testo mi sembra un po 'eccessivo ...
Prova questo...
$('.blink').each(function() {
var elem = $(this);
setInterval(function() {
if (elem.css('visibility') == 'hidden') {
elem.css('visibility', 'visible');
} else {
elem.css('visibility', 'hidden');
}
}, 500);
});
blink
verrà applicato ciò. Quindi avresti qualcosa di simile <span class="blink">Blinky Bill</span>
e poi dopo che DOM è pronto o simile, fai eseguire questo codice.
ecco lampeggiare con animazione:
$(".blink").animate({opacity:0},200,"linear",function(){
$(this).animate({opacity:1},200);
});
basta dare una lezione di ammiccamento qualunque cosa tu voglia lampeggiare:
<div class="someclass blink">some text</div>
tutti i saluti a DannyZB su #jquery
Caratteristiche:
Se preferisci non utilizzare jQuery, puoi farlo con 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;
}
Sembra funzionare in Chrome, anche se mi è sembrato di sentire un leggero singhiozzo.
Combina i codici sopra, penso che questa sia una buona soluzione.
function blink(selector){
$(selector).animate({opacity:0}, 50, "linear", function(){
$(this).delay(800);
$(this).animate({opacity:1}, 50, function(){
blink(this);
});
$(this).delay(800);
});
}
Almeno funziona sul mio web. http://140.138.168.123/2y78%202782
fadeIn()
e fadeOut()
non l'ha fatto per te?
Ecco il mio; ti dà il controllo sui 3 parametri che contano:
.
setInterval(function() {
$('.blink').fadeIn(300).fadeOut(500);
}, 1000);
Puoi anche utilizzare il metodo CSS standard (non è necessario il plug-in JQuery, ma compatibile con tutti i browser):
// Start blinking
$(".myblink").css("text-decoration", "blink");
// Stop blinking
$(".myblink").css("text-decoration", "none");
Puoi anche provare questi:
<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>
Questo è il modo PIÙ FACILE (e con la minima codifica):
setInterval(function() {
$( ".blink" ).fadeToggle();
}, 500);
Ora, se stai cercando qualcosa di più sofisticato ...
//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;
};
setInterval(function ())
può portare con sé alcuni problemi (bolle, arresto, permanenza "acceso", ecc.) Grazie mille!
Qui puoi trovare un plug-in jQuery blink con la sua rapida demo .
Lampeggiamento di base (lampeggiamento illimitato, periodo di lampeggiamento ~ 1 sec ):
$('selector').blink();
Su un utilizzo più avanzato, puoi sovrascrivere qualsiasi impostazione:
$('selector').blink({
maxBlinks: 60,
blinkPeriod: 1000, // in milliseconds
onBlink: function(){},
onMaxBlinks: function(){}
});
Qui puoi specificare il numero massimo di lampeggi e avere accesso a un paio di richiamate: onBlink
eonMaxBlinks
questo è abbastanza autoesplicativo.
Funziona in IE 7 e 8, Chrome, Firefox, Safari e probabilmente in IE 6 e Opera (anche se non sono stati testati su di essi).
(In piena trasparenza: sono il creatore di questo precedente. Avevamo la legittima necessità di usarlo al lavoro [ So che a tutti piace dirlo :-) ] per un allarme all'interno di un sistema e ho pensato di condividerlo solo per l'uso su una necessità legittima ;-)).
Ecco un altro elenco di plugin jQuery blink .
Puoi provare l'effetto Pulsate dell'interfaccia utente di jQuery:
Questa soluzione autonoma farà lampeggiare il testo un numero di volte specificato e quindi si fermerà.
Il lampeggiamento utilizza l'opacità, piuttosto che mostrare / nascondere, dissolvere o attivare / disattivare in modo che il DIV rimanga cliccabile, nel caso in cui sia un problema (ti consente di creare pulsanti con testo lampeggiante).
jsFiddle qui (contiene commenti aggiuntivi)
<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>
Fonti:
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>
Stavo per pubblicare il steps
polyfill -timed, ma poi mi sono ricordato che davvero non voglio vedere mai questo effetto, quindi ...
function blink(element, interval) {
var visible = true;
setInterval(function() {
visible = !visible;
element.style.visibility = visible ? "visible" : "hidden";
}, interval || 1000);
}
Ritengo che quanto segue sia di maggiore chiarezza e personalizzazione rispetto ad altre risposte.
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;
}
element_id
indicano un selettore 3. Seleziona lo stesso elemento più e più volte
Questo codice farà effettivamente lampeggiare l'elemento (i) senza toccare il layout (come fadeIn().fadeOut()
farà) semplicemente agendo sull'opacità; Ecco qua, testo lampeggiante; utilizzabile sia per il bene che per il male :)
setInterval(function() {
$('.blink').animate({ opacity: 1 }, 400).animate({ opacity: 0 }, 600);
}, 800);
Questo codice potrebbe aiutare a questo argomento. Semplice, ma utile.
<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>
Mi piace la risposta di alex, quindi questa è un po 'un'estensione di quella senza un intervallo (dal momento che dovresti cancellare quell'intervallo alla fine e sapere quando vuoi che un pulsante smetta di lampeggiare. Questa è una soluzione in cui passi l'elemento jquery , i ms che desideri per l'offset lampeggiante e il numero di volte in cui desideri che l'elemento lampeggi:
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));
}
}
Alcune di queste risposte sono piuttosto complicate, questo è un po 'più semplice:
$.fn.blink = function(time) {
var time = typeof time == 'undefined' ? 200 : time;
this.hide(0).delay(time).show(0);
}
$('#msg').blink();
Vedendo il numero di visualizzazioni su questa domanda e la mancanza di risposte che coprono sia il lampeggiare che l'arresto, ecco: prova jQuery.blinker ( 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();
}
});
In effetti un plugin per un semplice effetto ammiccante è eccessivo. Quindi, dopo aver sperimentato varie soluzioni, ho scelto tra una riga di javascript e una classe CSS che controlla esattamente come voglio far lampeggiare gli elementi (nel mio caso affinché il lampeggiamento funzioni devo solo cambiare lo sfondo in trasparente, in modo che il testo è ancora visibile):
JS:
$(document).ready(function () {
setInterval(function () { $(".blink").toggleClass("no-bg"); }, 1000);
});
CSS:
span.no-bg {
background-color: transparent;
}
Esempio completo in questo violino js .
La funzionalità Blink può essere implementata da semplice javascript, nessun requisito per il plugin jquery o anche jquery.
Funzionerà in tutti i browserFunzionerà , poiché utilizza le funzionalità di base
Ecco il codice
HTML:
<p id="blinkThis">This will blink</p>
Codice JS:
var ele = document.getElementById('blinkThis');
setInterval(function () {
ele.style.display = (ele.style.display == 'block' ? 'none' : 'block');
}, 500);
e un violino funzionante
Questo è ciò che ha finito per funzionare meglio per me. Ho usato jQuery fadeTo perché è su WordPress, che già collega jQuery. Altrimenti, probabilmente avrei optato per qualcosa con JavaScript puro prima di aggiungere un'altra richiesta http per un plugin.
$(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);
});
Ho scritto una semplice estensione jquery per il testo lampeggiante specificando il numero di volte in cui dovrebbe lampeggiare il testo, spero che aiuti gli altri.
//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);
Testo Avvio e arresto lampeggianti al clic del pulsante -
<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>