it-swarm.com.de

Text blinkt jQuery

Was ist ein einfacher Weg, um Text in jQuery zum Blinken zu bringen und ihn zu stoppen? Muss für IE, FF und Chrome funktionieren. Vielen Dank

96
HP.

Versuchen Sie es mit diesem Blink-Plugin

Zum Beispiel

$('.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önnten es möglicherweise erweitern, um die Animation zu stoppen und bei Bedarf zu starten.

50
barkmadley

Ein Plugin zum Blinken klingt für mich nach einem Overkill ...

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

hier blinkt die Animation:

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

geben Sie einfach eine Blink-Klasse, was 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
36
nir0

Wenn Sie jQuery lieber nicht verwenden, können Sie dies mit CSS3 erreichen

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

12

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

9
Moses

Hier ist meins ; Es gibt Ihnen die Kontrolle über die 3 wichtigen Parameter:

  • die Geschwindigkeit schwinden
  • die Ausblendgeschwindigkeit
  • die Wiederholungsgeschwindigkeit

.

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

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

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

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

W3C Link

5
Lastnico

Sie können diese auch 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>
5
jerjer

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

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

Fiddle

Nun, wenn Sie nach etwas anspruchsvollerem 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);

Fiddle

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

Hier finden Sie ein jQuery blink plugin mit seiner schnellen demo .

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

$('selector').blink();

Bei einer fortgeschritteneren Verwendung können Sie alle Einstellungen überschreiben:

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

Dort können Sie die maximale Anzahl der Blinksignale angeben und auf einige Rückrufe zugreifen: onBlink und onMaxBlinks, die ziemlich selbsterklärend sind.

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

(In voller Offenbarung: Ich bin der Schöpfer dieses Vorgängers. Wir hatten das legitime Bedürfnis, es bei der Arbeit zu verwenden [Ich weiß, wir alle sagen das gerne :-)] für einen Alarm innerhalb eines System und ich dachte daran, only für einen legitimen Bedarf zu teilen ;-)). 

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

3
fcarriedo

dieser Code ist für mich Arbeit

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

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

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

2

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

Beim Blinken wird die Deckkraft verwendet, anstatt zu zeigen/verbergen, zu blenden oder umzuschalten, sodass das DIV anklickbar bleibt, falls dies ein Problem ist (ermöglicht das Erstellen von Schaltflächen mit blinkendem Text).

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

1
gibberish

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

Ich wollte die steps-Timed Polyfill veröffentlichen, aber dann fiel mir ein, dass ich diesen Effekt wirklich nicht sehen möchte, also…

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

funktioniert nicht mit IE 7 & Safari. Funktioniert gut mit Firefox

1
jvm

Ich denke, das Folgende ist von größerer Klarheit und Anpassung 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;
        }
1

Text Blinken Start und Stopp beim Klicken auf -

<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

Einfachster Weg:

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

Sie können dies beliebig oft wiederholen oder innerhalb einer Schleife verwenden. Der erste Parameter von fadeTo () gibt die Dauer an, für die der Fade wirksam werden soll, und der zweite Parameter ist die Opazität.

0
Darush

In der Tat ist ein Plugin für einen einfachen Blink-Effekt ein Overkill. Nachdem ich mit verschiedenen Lösungen experimentiert hatte, habe ich zwischen einer Zeile Javascript und einer CSS-Klasse ausgewählt, die genau steuert, wie ich die Elemente blinzeln möchte (in meinem Fall muss der Blink funktionieren, ich muss nur den Hintergrund auf transparent setzen, damit 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 bei dieser js Geige .

0
Lucian

Die Anzahl der Ansichten zu dieser Frage und das Fehlen von Antworten, die sowohl das Blinken als auch das Stoppen einschließen, werden hier angezeigt: try 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();
    }
});
0
user1728278

Blinkt!

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

Die Blink-Funktionalität kann mit einfachem Javascript implementiert werden, keine Notwendigkeit für ein Jquery-Plugin oder sogar für Jquery.

Dies funktioniert in allen Browsern, da es die Grundfunktionen verwendet

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 Arbeitsfiedel

0
V31

Durch diesen Code werden die Elemente blink effektiv gemacht, ohne das Layout zu berühren (wie fadeIn().fadeOut() dies tun würde), indem sie nur auf die Deckkraft einwirken. Dahin gehts, blinkender Text; verwendbar für gut und böse :)

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

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

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

$('#msg').blink();
0
Aram Kocharyan

Das ist es, was am besten für mich funktioniert hat. Ich habe jQuery fadeTo verwendet, da es sich hierbei um WordPress handelt, in dem jQuery bereits eingebunden ist. Ansonsten hätte ich mich wahrscheinlich für reines JavaScript entschieden, bevor Sie eine weitere http-Anfrage für ein Plugin hinzufügen.

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

Ich habe eine einfache Jquery-Erweiterung für Textblinken geschrieben und dabei angegeben, wie oft der Text blinken soll. Hoffe, er 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);
0
Rohit Patel

Ich mag die Antwort von alex, daher handelt es sich hier um eine Erweiterung des Intervalls ohne Intervall (da Sie das Intervall schließlich löschen müssen und wissen müssen, wann eine Schaltfläche aufhört zu blinken.) Dies ist eine Lösung, bei der Sie das Jquery-Element übergeben , die gewünschte ms für den blinkenden Offset und wie oft 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));
    }
}
0
Vinay

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>
0
Jamer Gerero