Texto jQuery parpadeando

¿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

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);
});

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:

• no necesita ningún complemento (pero JQuery en sí)
• hace la cosa

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

Aquí está el mío ; te da control sobre los 3 parámetros que importan:

• el desvanecimiento en la velocidad
• la velocidad de desvanecimiento
• la velocidad de repetición

.

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");

Enlace W3C

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);

Violín

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);

Violín

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

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: onBlinky onMaxBlinkseso 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 .

este código es un trabajo para mí

   $(document).ready(function () {
        setInterval(function(){
            $(".blink").fadeOut(function () {
                $(this).fadeIn();
            });
        } ,100)
    });

Puede probar el efecto jQuery UI Pulsate:

http://docs.jquery.com/UI/Effects/Pulsate

La manera más fácil:

$(".element").fadeTo(250, 0).fadeTo(250,1).fadeTo(250,0).fadeTo(250,1);

Puede repetir esto tanto como desee o puede usarlo dentro de un bucle. el primer parámetro de fadeTo () es la duración para que el fade surta efecto, y el segundo parámetro es la opacidad.

$(".myblink").css("text-decoration", "blink");

no funciona con IE 7 y Safari. Funciona bien con Firefox

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

Enlace al autor

<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 stepspolyfill 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;
        }

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);

¡Parpadeando!

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();

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>