web-dev-qa-db-fra.com

Texte clignotant jQuery

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

javascriptjqueryhtmlcss
96
HP.

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.

50
barkmadley

Un plugin pour faire clignoter du texte sonne un peu trop pour moi ...

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

voici clignotant avec animation:

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

donnez juste un clin d'œil à la classe que vous voulez faire:

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

tous les égards à DannyZB sur #jquery 

fonctionnalités:

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

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 bruit de sanglot.

12
Jesse Hattabaugh

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

9
Moses

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

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

.

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

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

5
Lastnico

Vous pouvez également essayer ces:

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

Ceci est le moyen LE PLUS SIMPLE (et avec le moins de code):

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

Fiddle

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

Fiddle

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

Ici vous pouvez trouver un jQuery blink plugin avec son rapide demo .

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

$('selector').blink();

Sur une utilisation plus avancée, vous pouvez remplacer n'importe quel paramètre:

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

Vous pouvez y spécifier le nombre maximal de clignotements et avoir accès à plusieurs rappels: onBlink et onMaxBlinks qui sont assez explicites.

Fonctionne dans IE 7 & 8, Chrome, Firefox, Safari et probablement dans IE 6 et Opera (bien qu'ils n'aient pas encore été testés).

(En clair: je suis le créateur de l’ancien. Nous avions légitimement besoin 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 plugins jQuery blink .

3
fcarriedo

ce code est un travail pour moi

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

Vous pouvez essayer l’effet jQuery UI Pulsate:

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

2
Leniel Maccaferri

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 l'affichage/le masquage, le fondu ou la bascule de sorte que la DIV reste cliquable, au cas où cela poserait un problème (vous permet de créer des boutons avec du texte clignotant).

jsFiddle here (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

1
gibberish

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

J'allais publier le __filaire steps- timed, 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);
}
1
Ry-
$(".myblink").css("text-decoration", "blink");

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

1
jvm

Je pense que ce qui suit est plus clair et personnalisable 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;
        }
1
Hermann Ingjaldsson

Texte clignotant démarrer et arrêter en cliquant sur un 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>
0
Johnny

Manière la plus simple:

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

Vous pouvez répéter cela autant de fois 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 second paramètre est l'opacité.

0
Darush

En effet, un plugin pour un simple effet de clignotement est excessif. Ainsi, après avoir essayé diverses solutions, j'ai choisi entre une ligne de javascript et une classe CSS qui contrôle exactement la manière dont je souhaite faire clignoter les éléments (dans mon cas, pour que le clignotement fonctionne, il me suffit de changer l'arrière-plan en transparent, de sorte que le texte est encore visible):

JS:

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

CSS:

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

Exemple complet à ce js fiddle .

0
Lucian

Voyant le nombre de points de vue sur cette question et le manque de réponses qui couvrent à la fois le clignotement et l’arrêt, voyons ceci: try jQuery.blinker 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();
    }
});
0
user1728278

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

La fonctionnalité de clignotement peut être implémentée par javascript, aucune exigence pour le plugin jquery ni même jquery.

Cela fonctionnera dans tous les navigateurs, car il utilise les fonctionnalités 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

0
V31

Ce code va effectivement rendre le (s) élément (s) blink sans toucher à la présentation (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);
0
yPhil

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();
0
Aram Kocharyan

C'est ce qui a fonctionné le mieux pour moi. J'ai utilisé jQuery fadeTo car c'est sur WordPress, qui relie déjà jQuery. Sinon, j'aurais probablement opté pour quelque chose en 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);
});
0
Tom Holland

J'ai écrit une simple extension JQuery pour le texte clignotant tout en spécifiant le nombre de fois où il devrait clignoter le texte, espérons 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);
0
Rohit Patel

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 à quel moment un bouton doit cesser de clignoter. C’est une solution qui passe dans 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));
    }
}
0
Vinay

Ce code pourrait 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>
0
Jamer Gerero