Texte clignotant jQuery

Quel est un moyen simple de faire clignoter du texte dans jQuery et un moyen de l'arrêter? Doit fonctionner pour IE, FF et Chrome. Merci

Essayez d'utiliser ce plugin blink

Par exemple

$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink(100); // causes a 100ms blink interval.

C'est aussi un plugin très simple, et vous pourriez probablement l'étendre pour arrêter l'animation et la démarrer à la demande.

Un plugin pour faire clignoter du texte me semble un peu exagéré ...

Essaye ça...

$('.blink').each(function() {
    var elem = $(this);
    setInterval(function() {
        if (elem.css('visibility') == 'hidden') {
            elem.css('visibility', 'visible');
        } else {
            elem.css('visibility', 'hidden');
        }    
    }, 500);
});

ici clignote avec une animation:

$(".blink").animate({opacity:0},200,"linear",function(){
  $(this).animate({opacity:1},200);
});

donnez simplement une classe de clignotement à ce que vous voulez clignoter:

<div class="someclass blink">some text</div>

salutations à DannyZB sur #jquery

fonctionnalités:

• n'a pas besoin de plugins (mais JQuery lui-même)
• fait la chose

Si vous préférez ne pas utiliser jQuery, cela peut être réalisé avec 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; 
}

Semble fonctionner dans Chrome, même si je pensais avoir entendu un léger sanglot.

Combinez les codes ci-dessus, je pense que c'est une bonne solution.

function blink(selector){
    $(selector).animate({opacity:0}, 50, "linear", function(){
        $(this).delay(800);
        $(this).animate({opacity:1}, 50, function(){
        blink(this);
        });
        $(this).delay(800);
    });
}

Au moins, cela fonctionne sur mon site Web. http://140.138.168.123/2y78%202782

Voici la mienne ; il vous permet de contrôler les 3 paramètres qui comptent:

• le fondu de vitesse
• la vitesse de fondu
• la vitesse de répétition

.

setInterval(function() {
    $('.blink').fadeIn(300).fadeOut(500);
}, 1000);

Vous pouvez également utiliser la méthode CSS standard (pas besoin de plugin JQuery, mais compatible avec tous les navigateurs):

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

// Stop blinking
$(".myblink").css("text-decoration", "none");

Lien W3C

Vous pouvez également essayer ceux-ci:

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

C'est la manière la plus FACILE (et avec le moins de codage):

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

Violon

Maintenant, si vous cherchez quelque chose de plus sophistiqué ...

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

Violon

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

Ici vous pouvez trouver un plugin jQuery blink avec sa démo rapide .

Clignotement de base (clignotement illimité, période de clignotement ~ 1 s ):

$('selector').blink();

Sur une utilisation plus avancée, vous pouvez remplacer l'un des paramètres:

$('selector').blink({
    maxBlinks: 60, 
    blinkPeriod: 1000,   // in milliseconds
    onBlink: function(){}, 
    onMaxBlinks: function(){}
});

Là, vous pouvez spécifier le nombre maximum de clignotements et avoir accès à quelques rappels: onBlinketonMaxBlinks cela est assez explicite.

Fonctionne dans IE 7 & 8, Chrome, Firefox, Safari et probablement dans IE 6 et Opera (bien que je n'ai pas testé sur eux).

(En pleine divulgation: je suis le créateur de ce précédent. Nous avons eu le besoin légitime de l'utiliser au travail [ je sais que nous aimons tous le dire :-) ] pour une alarme dans un système et j'ai pensé à partager uniquement à utiliser sur un besoin légitime ;-)).

Voici une autre liste de plugins jQuery blink .

ce code fonctionne pour moi

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

Vous pouvez essayer l'effet Pulsate de l'interface utilisateur jQuery:

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

Moyen le plus simple:

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

Vous pouvez le répéter autant que vous le souhaitez ou vous pouvez l'utiliser dans une boucle. le premier paramètre de fadeTo () est la durée pendant laquelle le fondu prend effet, et le deuxième paramètre est l'opacité.

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

ne fonctionne pas avec IE 7 et Safari. Fonctionne bien avec Firefox

Cette solution autonome fera clignoter le texte un nombre spécifié de fois, puis s'arrêtera.

Le clignotement utilise l'opacité, plutôt que d'afficher / masquer, de fondre ou de basculer afin que le DIV reste cliquable, au cas où cela poserait un problème (vous permet de créer des boutons avec du texte clignotant).

jsFiddle ici (contient des commentaires supplémentaires)

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

Sources:
Danny Gimenez
Moses Christian

Lien vers l'auteur

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

J'allais publier le stepspolyfill temporisé, mais je me suis souvenu que je ne voulais vraiment pas voir cet effet, alors ...

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

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

Je pense que ce qui suit est plus clair et personnalisé que les autres réponses.

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

Ce code fera effectivement clignoter le ou les éléments sans toucher à la mise en page (comme le fadeIn().fadeOut()fera) en agissant simplement sur l'opacité; Voilà, texte clignotant; utilisable pour le bien et le mal :)

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

Clignotant!

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

Ce code peut aider à ce sujet. Simple, mais 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>

J'aime la réponse d'Alex, c'est donc un peu une extension de cela sans intervalle (puisque vous devrez éventuellement effacer cet intervalle et savoir quand vous voulez qu'un bouton arrête de clignoter. C'est une solution où vous passez l'élément jquery , les ms que vous voulez pour le décalage de clignotement et le nombre de fois que vous voulez que l'élément clignote:

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

Certaines de ces réponses sont assez compliquées, c'est un peu plus facile:

$.fn.blink = function(time) {
    var time = typeof time == 'undefined' ? 200 : time;
    this.hide(0).delay(time).show(0);
}

$('#msg').blink();

Voyant le nombre de vues sur cette question, et le manque de réponses qui couvrent à la fois le clignotement et son arrêt, voici: essayez 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();
    }
});

En effet, un plugin pour un simple effet de clignotement est exagéré. Donc, après avoir expérimenté diverses solutions, j'ai choisi entre une ligne de javascript et une classe CSS qui contrôle exactement comment je veux faire clignoter les éléments (dans mon cas, pour que le clignotement fonctionne, je n'ai besoin que de changer l'arrière-plan en transparent, de sorte que le texte est toujours visible):

JS:

$(document).ready(function () {
        setInterval(function () { $(".blink").toggleClass("no-bg"); }, 1000);
    });

CSS:

span.no-bg {
    background-color: transparent;
}

Exemple complet à ce violon js .

La fonctionnalité Blink peut être implémentée par javascript simple, aucune exigence pour le plugin jquery ou même jquery.

Cela fonctionnera dans tous les navigateurs , car il utilise la fonctionnalité de base

Voici le code

HTML:

<p id="blinkThis">This will blink</p>

Code JS:

var ele = document.getElementById('blinkThis');
setInterval(function () {
    ele.style.display = (ele.style.display == 'block' ? 'none' : 'block');
}, 500);

et un violon de travail

C'est ce qui a fonctionné le mieux pour moi. J'ai utilisé jQuery fadeTo parce que c'est sur WordPress, qui lie déjà jQuery. Sinon, j'aurais probablement opté pour quelque chose avec du JavaScript pur avant d'ajouter une autre requête http pour 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);
});

J'ai écrit une simple extension jquery pour le texte clignotant tout en spécifiant le nombre de fois où il doit clignoter le texte, j'espère que cela aide les autres.

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

Texte clignotant démarre et s'arrête en cliquant sur le bouton -

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