Texte Clignotant jQuery

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

Essayez ceci...

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

Voici clignotant avec animation:

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

Donnez simplement une classe de clignotement tout ce que vous voulez clignoter:

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

Toutes les salutations à DannyZB sur #jquery

Caractéristiques:

• 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, bien que je pensais avoir entendu un léger bruit sanglotant.

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 web. http://140.138.168.123/2y78%202782

Voici le mien; il vous donne le contrôle sur les 3 paramètres qui comptent:

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

.

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

Vous pouvez également essayer:

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

Vous pouvez également utiliser la manière 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

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

C'est le moyen le plus simple (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

Ici vous pouvez trouver un jQuery clin plugin rapide démo.

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

$('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 battements et d'avoir accès à quelques rappels: onBlink et onMaxBlinks qui sont assez explicites.

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

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

Voici une autre liste de jQuery clin plugins.

Ce code est un travail 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

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

Ne fonctionne pas avec IE 7 & Safari. Fonctionne bien avec Firefox

Cette solution autonome clignote le texte un nombre spécifié de fois, puis s'arrête.

Le clignotement utilise l'opacité, plutôt que d'afficher/masquer, de fondu ou de basculer pour que le DIV reste cliquable, au cas où il y aurait 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
Moïse Christian

Lien de 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 poster le polyfill steps-chronométré, 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 d'une plus grande clarté et personnalisation que d'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;
        }

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, donc c'est un peu une extension de cela sans intervalle (puisque vous devrez effacer cet intervalle éventuellement et savoir quand vous voulez qu'un bouton cesse de clignoter. C'est une solution où vous passez l'élément jquery, Le ms que vous voulez pour le décalage clignotant 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é, 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();

En voyant le nombre de vues sur cette question, et le manque de réponses qui couvrent à la fois le clignotement et l'arrêt, Voici: try jQuery.clignotant out (démo).

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 clignoter les éléments (dans mon cas, pour que le clignotement fonctionne, il suffit de changer l'arrière-plan en transparent, de sorte que le texte soit toujours visible):

JS:

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

CSS:

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

Exemple Complet à ce js fiddle.

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 fini par fonctionner 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 clignotement du texte tout en spécifiant le nombre de fois où il devrait 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émarrer et arrêter sur le bouton Cliquez -

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

Moyen le plus simple:

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

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

CE code fera effectivement clignoter les éléments sans toucher à la mise en page (comme le fera fadeIn().fadeOut()) en agissant simplement sur l'opacité; voilà, Texte Clignotant; Utilisable à la fois pour le bien et le mal :)

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