parpadeante - parpadeo javascript

Texto parpadeante jQuery

Question

¿Cuál es una manera fácil de hacer que el texto parpadee en jQuery y una forma de detenerlo? Debe funcionar para IE, FF y Chrome. Gracias

Answer 1

Al ver el número de visitas a esta pregunta y la falta de respuestas que cubren parpadear y detenerlo, 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();
    }
});

Answer 2

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

Answer 3

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

Answer 4

Aquí puede encontrar un plugin jQuery blink con su demo 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 que son bastante onMaxBlinks explicar.

Funciona en IE 7 y 8, Chrome, Firefox, Safari y probablemente en IE 6 y Opera (aunque no han probado en ellos).

(En revelación completa: soy el creador de este anterior. Tuvimos la necesidad legítima de usarlo en el trabajo [ Sé que a todos nos gusta decir esto :-) ] por una alarma dentro de un sistema y pensé en compartir solo para usar en una necesidad legítima ;-)).

Aquí hay otra lista de plugins jQuery blink .

Answer 5

Combina 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

Answer 6

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

Answer 7

De hecho, un complemento para un simple efecto de parpadeo es excesivo. Entonces, después de experimentar con varias soluciones, he elegido entre una línea de javascript y una clase de CSS que controla exactamente cómo quiero parpadear los elementos (en mi caso, para que el parpadeo funcione solo necesito cambiar el fondo a transparente, para que el texto todavía está 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 .

Answer 8

Esta es la manera MÁS FÁCIL (y con la menor codificación):

setInterval(function() {
    $( ".blink" ).fadeToggle();
}, 500);

Fiddle

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

Fiddle

Answer 9

Esta solución autónoma parpadeará el texto un número específico de veces y luego se detendrá.

El parpadeo utiliza opacidad, en lugar de mostrar / ocultar, fundir o alternar, de modo que se pueda hacer clic en el DIV, en caso de que haya algún 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

Answer 10

Este código hará que los elementos parpadeen sin tocar el diseño (como lo fadeIn().fadeOut() actuando sobre la opacidad; Ahí tienes, texto parpadeante; utilizable para el bien y el mal :)

setInterval(function() {
  $(''.blink'').animate({ opacity: 1 }, 400).animate({ opacity: 0 }, 600);
}, 800);

Answer 11

Este código puede ayudar a 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>

Answer 12

Esto es lo que terminó funcionando mejor para mí. Utilicé jQuery fadeTo porque está en WordPress, que ya vincula a 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);
});

Answer 13

He escrito una extensión simple de jquery para el parpadeo del texto, mientras que especifico la cantidad de veces que debe parpadear el texto, Espero que ayude a los demás.

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

Answer 14

Iba a publicar los steps -polimerización temporal, pero luego recordé que realmente no quería ver este efecto, así que ...

function blink(element, interval) {
    var visible = true;

    setInterval(function() {
        visible = !visible;
        element.style.visibility = visible ? "visible" : "hidden";
    }, interval || 1000);
}

Answer 15

La funcionalidad de Blink se puede implementar mediante javascript simple, sin necesidad de jquery o incluso jquery.

Esto funcionará en todos los navegadores , ya que está usando la funcionalidad básica

Aquí está el código

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

Answer 16

La manera más fácil:

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

Puede repetir esto tanto como quiera o puede usarlo dentro de un bucle. el primer parámetro de fadeTo () es la duración del efecto de desvanecimiento, y el segundo parámetro es la opacidad.

Answer 17

Me gusta la respuesta de Alex, así que esto es una extensión de eso sin un intervalo (ya que necesitaría borrar ese intervalo con el tiempo y saber cuándo desea que un botón deje de parpadear. Esta es una solución donde pasa el elemento jquery , el ms que desea para el desplazamiento intermitente y el número 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));
    }
}

Answer 18

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

Answer 19

Puedes probar el efecto JQuery UI Pulsate:

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

Answer 20

Si prefieres 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 que funciona en Chrome, aunque creí escuchar un leve ruido de llanto.

Answer 21

También puede usar el modo 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

Answer 22

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>

Answer 23

Un plugin para parpadear un poco de 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);
});

Answer 24

aquí está parpadeando con la 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>

todo lo que respecta a DannyZB en #jquery

caracteristicas:

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

Answer 25

este código es trabajo para mi

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

Answer 26

Intenta usar este plugin blink

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 bajo demanda.

Answer 27

awesome-gallery.blogspot.com/2011/03/…

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

Answer 28

Texto Parpadeando inicio y parada 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>

Answer 29

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

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

Answer 30

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