Text blinkt jQuery

Was ist eine einfache Möglichkeit, Text in jQuery zum Blinken zu bringen und ihn zu stoppen? Muss für IE, FF und Chrome funktionieren. Vielen Dank

Versuchen Sie es mit diesem Blink-Plugin

Beispielsweise

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

Es ist auch ein sehr einfaches Plugin, und Sie können es wahrscheinlich erweitern, um die Animation zu stoppen und bei Bedarf zu starten.

Ein Plugin zum Blinken von Text klingt für mich ein bisschen übertrieben ...

Versuche dies...

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

Hier blinkt die Animation:

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

Geben Sie einfach eine Blinkklasse, was auch immer Sie blinken möchten:

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

Alle Grüße an DannyZB auf #jquery

Eigenschaften:

• benötigt keine Plugins (aber JQuery selbst)
• macht das Ding

Wenn Sie jQuery lieber nicht verwenden möchten, kann dies mit CSS3 erreicht werden

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

Scheint in Chrome zu funktionieren, obwohl ich dachte, ich hätte ein leichtes Schluchzen gehört.

Kombinieren Sie die obigen Codes, ich denke, das ist eine gute Lösung.

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

Zumindest funktioniert es in meinem Web. http://140.138.168.123/2y78%202782

Hier ist meins ; Sie haben die Kontrolle über die 3 Parameter, die wichtig sind:

• die Geschwindigkeit verblassen
• die Ausblendgeschwindigkeit
• die Wiederholungsgeschwindigkeit

.

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

Sie können auch die Standard-CSS-Methode verwenden (kein JQuery-Plugin erforderlich, aber mit allen Browsern kompatibel):

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

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

W3C Link

Sie können auch Folgendes ausprobieren:

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

Dies ist der EINFACHSTE Weg (und mit der geringsten Codierung):

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

Geige

Nun, wenn Sie etwas anspruchsvolleres suchen ...

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

Geige

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

Hier finden Sie ein jQuery-Blink- Plugin mit seiner schnellen Demo .

Grundlegendes Blinken ( unbegrenztes Blinken, Blinkzeit ~ 1 Sek. ):

$('selector').blink();

Bei einer erweiterten Verwendung können Sie eine der folgenden Einstellungen überschreiben:

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

Dort können Sie die maximale Anzahl von Blinksignalen angeben und auf einige Rückrufe zugreifen: onBlinkund onMaxBlinksdas ist ziemlich selbsterklärend.

Funktioniert in IE 7 & 8, Chrome, Firefox, Safari und wahrscheinlich in IE 6 und Opera (obwohl noch nicht getestet).

(Vollständige Offenlegung: Ich bin der Schöpfer dieses vorherigen. Wir hatten das berechtigte Bedürfnis, es bei der Arbeit zu verwenden [ ich weiß, dass wir alle dies gerne sagen :-) ], um einen Alarm innerhalb eines Systems auszulösen , und ich dachte darüber nach, ihn zu teilen nur zur Verwendung bei legitimem Bedarf ;-)).

Hier ist eine weitere Liste von jQuery-Blink-Plugins .

Dieser Code ist Arbeit für mich

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

Sie können den jQuery UI Pulsate-Effekt ausprobieren:

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

Einfachster Weg:

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

Sie können dies so oft wiederholen, wie Sie möchten, oder Sie können es in einer Schleife verwenden. Der erste Parameter von fadeTo () ist die Dauer, bis zu der die Überblendung wirksam wird, und der zweite Parameter ist die Deckkraft.

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

funktionieren nicht mit IE 7 & Safari. Arbeiten Sie gut mit Firefox

Diese eigenständige Lösung blinkt den Text eine bestimmte Anzahl von Malen und stoppt dann.

Das Blinken verwendet Deckkraft anstelle von Ein- / Ausblenden, Überblenden oder Umschalten, sodass der DIV für den Fall, dass dies jemals ein Problem darstellt, anklickbar bleibt (Sie können Schaltflächen mit blinkendem Text erstellen).

jsFiddle hier (enthält zusätzliche Kommentare)

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

Quellen:
Danny Gimenez
Moses Christian

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

Ich wollte die stepszeitgesteuerte Polyfüllung veröffentlichen, aber dann fiel mir ein, dass ich diesen Effekt wirklich nie sehen möchte, also…

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

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

Ich bin der Meinung, dass das Folgende klarer und anpassbarer ist als andere Antworten.

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

Dieser Code lässt die Elemente effektiv blinken, ohne das Layout zu berühren (wie fadeIn().fadeOut()dies der Fall ist), indem nur auf die Deckkraft reagiert wird. Los geht's, blinkender Text; verwendbar für gut und böse :)

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

Blinkend!

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

Dieser Code kann zu diesem Thema hilfreich sein. Einfach und doch nützlich.

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

Ich mag die Antwort von alex, daher ist dies eine Erweiterung des Intervalls ohne Intervall (da Sie dieses Intervall eventuell löschen müssen und wissen müssen, wann eine Schaltfläche nicht mehr blinken soll. Dies ist eine Lösung, bei der Sie das jquery-Element übergeben , die ms, die Sie für den Blinkversatz wünschen, und die Häufigkeit, mit der das Element blinken soll:

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

Einige dieser Antworten sind ziemlich kompliziert, das ist etwas einfacher:

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

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

Angesichts der Anzahl der Aufrufe zu dieser Frage und des Mangels an Antworten, die sowohl das Blinken als auch das Stoppen abdecken, können Sie Folgendes tun : Probieren Sie jQuery.blinker aus ( 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();
    }
});

In der Tat ist ein Plugin für einen einfachen Blinkeffekt übertrieben. Nachdem ich mit verschiedenen Lösungen experimentiert habe, habe ich zwischen einer Zeile Javascript und einer CSS-Klasse gewählt, die genau steuert, wie ich die Elemente blinken möchte (in meinem Fall muss ich nur den Hintergrund in transparent ändern, damit das Blinken funktioniert der Text ist noch sichtbar):

JS:

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

CSS:

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

Vollständiges Beispiel für diese Geige .

Die Blink-Funktionalität kann durch einfaches Javascript implementiert werden, ohne dass ein JQuery-Plugin oder sogar JQuery erforderlich ist.

Dies funktioniert in allen Browsern , da die Grundfunktionalität verwendet wird

Hier ist der Code

HTML:

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

JS-Code:

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

und eine funktionierende Geige

Das hat am besten für mich funktioniert. Ich habe jQuery fadeTo verwendet, weil dies auf WordPress ist, das jQuery bereits verknüpft. Andernfalls hätte ich mich wahrscheinlich für etwas mit reinem JavaScript entschieden, bevor ich eine weitere http-Anfrage für ein Plugin hinzugefügt hätte.

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

Ich habe eine einfache jquery-Erweiterung für das Blinken von Text geschrieben und dabei angegeben, wie oft der Text blinken soll. Ich hoffe, es hilft anderen.

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

Text Blinken Start und Stopp beim Klicken auf die Schaltfläche -

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