¿Cuál es una forma fácil de hacer que el texto parpadee en jQuery y una forma de detenerlo? Debe funcionar para IE, FF y Chrome. Gracias
¿Cuál es una forma fácil de hacer que el texto parpadee en jQuery y una forma de detenerlo? Debe funcionar para IE, FF y Chrome. Gracias
Respuestas:
Intenta usar este complemento de parpadeo
Por ejemplo
$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink(100); // causes a 100ms blink interval.
También es un complemento muy simple, y probablemente podría extenderlo para detener la animación e iniciarla a pedido.
Un complemento para hacer parpadear un texto me suena un poco exagerado ...
Prueba esto...
$('.blink').each(function() {
var elem = $(this);
setInterval(function() {
if (elem.css('visibility') == 'hidden') {
elem.css('visibility', 'visible');
} else {
elem.css('visibility', 'hidden');
}
}, 500);
});
blink
tendrá esto aplicado. Entonces tendría algo como <span class="blink">Blinky Bill</span>
y luego, después de DOM listo o similar, ejecute este código.
aquí está parpadeando con animación:
$(".blink").animate({opacity:0},200,"linear",function(){
$(this).animate({opacity:1},200);
});
solo da una clase de parpadeo lo que quieras parpadear:
<div class="someclass blink">some text</div>
saludos a DannyZB en #jquery
caracteristicas:
Si prefiere no usar jQuery, esto se puede lograr 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;
}
Parece funcionar en Chrome, aunque creo que escuché un leve sollozo.
Combine los códigos anteriores, creo que esta es una buena solución.
function blink(selector){
$(selector).animate({opacity:0}, 50, "linear", function(){
$(this).delay(800);
$(this).animate({opacity:1}, 50, function(){
blink(this);
});
$(this).delay(800);
});
}
Al menos funciona en mi web. http://140.138.168.123/2y78%202782
fadeIn()
y fadeOut()
no lo hiciste por ti?
Aquí está el mío ; te da control sobre los 3 parámetros que importan:
.
setInterval(function() {
$('.blink').fadeIn(300).fadeOut(500);
}, 1000);
También puede usar la forma CSS estándar (no es necesario el complemento JQuery, pero es compatible con todos los navegadores):
// Start blinking
$(".myblink").css("text-decoration", "blink");
// Stop blinking
$(".myblink").css("text-decoration", "none");
También puedes probar estos:
<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>
Esta es la forma MÁS FÁCIL (y con la menor cantidad de codificación):
setInterval(function() {
$( ".blink" ).fadeToggle();
}, 500);
Ahora bien, si buscas algo más sofisticado ...
//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 ())
puede traer consigo algunos problemas (burbujear, detenerse, permanecer "encendido", etc.) ¡Muchas gracias!
Aquí puede encontrar un complemento jQuery blink con su demostración rápida .
Parpadeo básico (parpadeo ilimitado, período de parpadeo ~ 1 segundo ):
$('selector').blink();
En un uso más avanzado, puede anular cualquiera de las configuraciones:
$('selector').blink({
maxBlinks: 60,
blinkPeriod: 1000, // in milliseconds
onBlink: function(){},
onMaxBlinks: function(){}
});
Allí puede especificar el número máximo de parpadeos, así como tener acceso a un par de devoluciones de llamada: onBlink
y onMaxBlinks
eso se explica por sí mismo.
Funciona en IE 7 y 8, Chrome, Firefox, Safari y probablemente en IE 6 y Opera (aunque no lo he probado).
(En la divulgación completa: soy el creador de este anterior. Teníamos la necesidad legítima de usarlo en el trabajo [ sé que a todos nos gusta decir esto :-) ] para una alarma dentro de un sistema y pensé en compartir solo para usar en una necesidad legítima ;-)).
Aquí hay otra lista de complementos de jQuery blink .
Puede probar el efecto jQuery UI Pulsate:
Esta solución independiente hará parpadear el texto un número específico de veces y luego se detendrá.
El parpadeo usa opacidad, en lugar de mostrar / ocultar, desvanecer o alternar para que se pueda hacer clic en el DIV, en caso de que eso sea un problema (le permite hacer botones con texto parpadeante).
jsFiddle aquí (contiene comentarios adicionales)
<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>
Fuentes:
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>
Iba a publicar el steps
polyfill cronometrado, pero luego recordé que realmente no quiero ver este efecto nunca, así que ...
function blink(element, interval) {
var visible = true;
setInterval(function() {
visible = !visible;
element.style.visibility = visible ? "visible" : "hidden";
}, interval || 1000);
}
Siento que lo siguiente es de mayor claridad y personalización que otras respuestas.
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
apuntan a un selector 3. Selecciona el mismo elemento una y otra vez
Este código efectivamente hará que los elementos parpadeen sin tocar el diseño (como fadeIn().fadeOut()
lo hará) simplemente actuando sobre la opacidad; Ahí tienes, texto parpadeante; utilizable tanto para el bien como para el mal :)
setInterval(function() {
$('.blink').animate({ opacity: 1 }, 400).animate({ opacity: 0 }, 600);
}, 800);
Este código puede ayudar con este tema. Simple pero útil.
<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>
Me gusta la respuesta de Alex, por lo que esta es una extensión de eso sin un intervalo (ya que eventualmente necesitaría borrar ese intervalo y saber cuándo quiere que un botón deje de parpadear. Esta es una solución en la que pasa el elemento jquery , los ms que desea para el desplazamiento intermitente y la cantidad de veces que desea que el elemento parpadee:
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));
}
}
Algunas de estas respuestas son bastante complicadas, esto es un poco más fácil:
$.fn.blink = function(time) {
var time = typeof time == 'undefined' ? 200 : time;
this.hide(0).delay(time).show(0);
}
$('#msg').blink();
Al ver el número de visitas a esta pregunta y la falta de respuestas que cubran tanto el parpadeo como la detención, aquí va: pruebe 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();
}
});
De hecho, un complemento para un simple efecto de parpadeo es excesivo. Entonces, después de experimentar con varias soluciones, elegí entre una línea de javascript y una clase CSS que controla exactamente cómo quiero hacer parpadear los elementos (en mi caso, para que el parpadeo funcione, solo necesito cambiar el fondo a transparente, de modo que el texto todavía es visible):
JS:
$(document).ready(function () {
setInterval(function () { $(".blink").toggleClass("no-bg"); }, 1000);
});
CSS:
span.no-bg {
background-color: transparent;
}
Ejemplo completo en este js violín .
La funcionalidad Blink se puede implementar mediante javascript simple, sin requisitos para el complemento jquery o incluso jquery.
Esto funcionará en todos los navegadores , ya que está utilizando la funcionalidad básica
Aqui esta el codigo
HTML:
<p id="blinkThis">This will blink</p>
Código JS:
var ele = document.getElementById('blinkThis');
setInterval(function () {
ele.style.display = (ele.style.display == 'block' ? 'none' : 'block');
}, 500);
y un violín de trabajo
Esto es lo que terminó funcionando mejor para mí. Usé jQuery fadeTo porque está en WordPress, que ya enlaza jQuery. De lo contrario, probablemente habría optado por algo con JavaScript puro antes de agregar otra solicitud http para un complemento.
$(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);
});
He escrito una extensión jquery simple para que el texto parpadee mientras especifico el número de veces que debería parpadear el texto, espero que ayude a otros.
//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);
Texto parpadeante comenzar y detener al hacer clic en el botón -
<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>