JavaScript Blinkender Objekt | JavaScript

[flashnso]

Hallo Leute,

ich bin gerade an einem Projekt, das ich für die Mutter meiner Freundin mache.

Sie wünscht sich ein Programm, das ganz kurz einen Text oder ein Bild auf dem Bildschirm erscheine lässt und dann ganz schnell wieder verschwindet.

Alles ist soweit fertig das einzige was fehlt um das Programm nutzen zu können, ist die Funktion, das ganze Blinken zu lassen.
Ich habe mehrer verschiedene Funktionen gefunden, diese sind aber alle mit dem Selben Zeit Intervall.
Also 1sec an 1sec aus.

Was ich brauche, ist eine Funktion, die 100ms an ist und 2-3 Minuten aus.(am besten auch noch Variabel, aber das bekomme ich das wohl noch selber hin.)

Leider habe ich Absolut keine Ahnung wie ich das umsetzen soll, da ich noch ein Anfänger in Java Script bin.

Ich hoffe mir kann da jemand Helfen.

Liebe Grüße
Flashnos

~edit~ ja ich weiß es heist Blinkendes Objekt :-)

 

[Einhörnchen]

Verwendest du jQuery? Dann wäre sowas denkbar:

function blinker() {
$('.blink_me').fadeOut(500);
$('.blink_me').fadeIn(500);
}

setInterval(blinker, 1000); //Runs every second

Quelle: https://www.kapadiya.net/snippets/how-to-make-blinking-flashing-text-with-css3-and-jquery/

 

[flashnso]

ja jQuery nutze ich auch.

Sowas ähnliches habe ich auch gefunden.

Leider ist das nicht ganz das was ich meine.

und zwar soll der Text 100 ms sichtbar sein und dann für 3 Minuten nicht

also ich kann hier ja nur den Intervall und und die fade in/out Zeiten machen. Ich bräuchte aber noch eine pause, wenn das unsichtbar ist.

 

[pcBauer]

So zum Beispiel?

Hatte es zuerst mit 1 Sekunde anzeigen und 10 Sekunden verstecken gemacht (Siehe 1. Version), der Link oben sollte dann auf die 100ms respektive 3 Minuten Pause passen

PS:
Noch eine Variante, wenn es gleich in der ersten Sekunde angezeigt werden soll.

 

[flashnso]

Das ist das was ich brauche!

Vielen Dank :-)

 

[Einhörnchen]

und zwar soll der Text 100 ms sichtbar sein und dann für 3 Minuten nicht

Ich setze fadeIn und fadeOut mal mit 100ms, damit es etwas softer wirkt. Kannst es auch jeweils auf 50 setzen.

function blinker() {
$('.blink_me').fadeOut(100);
$('.blink_me').fadeIn(100);
}

setInterval(blinker, 3000);

 

[Teisi]

in zeiten von css3 nutzt ihr echt noch fadeIn-out für sowas?

 

[Einhörnchen]

Stellt sich die Frage nach der Browser-Unterstützung. Fadein oder die Setinterval in Verbindung mit show/hide dürfte dagegen sehr unproblematisch sein. Der blink Tag wurde ja leider abgeschafft oder zum Glück

 

[Bagbag]

Sollte wohl keine Probleme geben: http://caniuse.com/#feat=css-animation.

 

[flashnso]

Hallo :-)

ich habe das in meinen Code so eingefügt. aber leider funktioniert das irgendwie noch nicht.
Die nachricht wird die ganze Zeit angezeigt.
Ich habe jQuery 3.2.1 eingebunden und das funktioniert auch alles.

Ich hatte es erst versucht über eine extra JS Datei zu machen und dann direkt in den HTML Code einzubinden.


<div class="blinker">Nachricht</div>
<!--src="message.js" -->
<script>
$('.blinker').hide(0);


function blinker() {
$('.blinker').show(0).delay( 100 ).hide(0);
}

setInterval(blinker, 3 * 60 * 1000);

</script>

Ergänzung (25. August 2017)

Ich nutze NodeJS und Electron. Da wird soweit ich weiß immer das aktuellste und neuste unterstützt.

 

[pcBauer]

Hey, probier mal den Code in ein "$(document).ready()" zu wrappen. *LINK*

CSS wäre wohl auch ne Variante, kenne mich mit CSS Animationen gar nicht aus, da darf hier die Schaulustigenfraktion auch gerne was beitragen

 

[flashnso]

Hallo pcBauer,

hatte es jetzt doch noch hinbekommen. Nur erfolgreich verdängt hier zu schreiben.

Bei dem framework electron muss man jquery anders einbinden.

<script> window.$jQuery = require("jquery");</script>

ich wusste das jquery da funktioniert deshalb hatte ich oben geschrieben, das ich das ich das auch nutze, da ich dachte man bindet das ganz normal ein.
nunja.

Hab deine erste lösung verwendet. die klappt super. hab nur die intervall zeit als variable geändert.
Vielen Dank :-)

Liebe Grüße

 

[pcBauer]

Alles klar,

dann ist ja alles in Butter.
Immer gerne

 

[Teisi]

ok: Bleistift: https://stackoverflow.com/questions/13955163/imitating-a-blink-tag-with-css3-animations