Der beste Weg zum Verwischen jQuery

Ich habe eine Seite entwickelt, wo ich eine Reihe von Tools öffnen und alles darunter ist unscharf außer den Werkzeugsymbolen, die überlagert sind. (Wie mac Launcher app)Der beste Weg zum Verwischen jQuery

Hier ist die, wie ich es getan habe:

HTML

<body> 
    <div id="tools"></div> 
    <div Id="Blur">in here I have all my page content</div> 
</body>

jQuery

$(function(){ $('Blur').blur(); });

Die Sache ist die: das funktioniert, aber das Problem Ist einmal ein anständiger Inhalt auf der Seite vorhanden, ist die Unschärfe sehr langsam, um ein- und auszublenden. Kennt jemand eine bessere Möglichkeit, eine Seite unscharf zu machen, ohne dass die Leistung stark beeinträchtigt wird?

(Wenn die Formatierung nicht gut aussehen oder Sie benötigen mehr Informationen sagen Sie mir! Dies ist mein erster Beitrag mit Stack-Überlauf)

Dank!

Quelle

2017-06-15 Isaac S. Weaver

werden Sie einige Bibliothek um den Unschärfeeffekt zu erzeugen? jQuery blur ist der Onblur-Event-Handler. Hast du ein Problem? –

von Ihrem falschen Wähler zu urteilen, das Fehlen irgendwelche plugins/Bibliotheken unter Berufung auf, und meine Zweifel, dass jedes Plugin wert seine Namen die vorhandene 'Unschärfe überschreiben würde()' Funktion ist etwas in Ihrem Beispiel sicherlich nicht in Ordnung. In diesem Sinne können Sie CSS dafür verwenden - Jack A hat ein Beispiel unten. – Santi

Sie möchten wahrscheinlich eine CSS blur filter dafür verwenden.

#Blur { 
    filter: blur(1px); 
}

Zum Beispiel: https://jsfiddle.net/1duss393/

Quelle

2017-06-15 21:22:36

Also habe ich meinen Code mit Ihrem Beispiel neu gemacht. Hier ist mein Freund. https://jsfiddle.net/edogLdy2/1/ Problem ist, wenn es viel Inhalt auf der Seite gibt, ist der Übergang langsam oder laggy. Gibt es eine Möglichkeit, viele Inhalte ohne Verzögerung zu verwischen, wenn der Übergang verwendet wird? –

@ IsaacS.Weaver Die Verwendung von CSS für Effekte hat normalerweise die beste Leistung, da es vom Browser implementiert wird. Ich kenne keine Tricks, um den CSS-Ansatz zu optimieren, aber Sie können vielleicht ein paar Tricks finden, wenn Sie danach suchen. –

Danke @JackA. Ich weis das zu schätzen! –

In jQuery blur() Funktion bedeutet nicht genau etwas zu verwischen. Es ist eine Funktion, die funktioniert, wenn der Benutzer zum Beispiel auf ein externes Element klickt oder auf die Tabulatortaste klickt. Es ist dasselbe wie focus(), aber "reverse".

Also, wenn Sie Eingabe in Ihrem HTML haben, und Sie Funktion wollen, die funktionieren wird, wenn der Benutzer bei der Eingabe fokussiert (klicken() ist nicht das gleiche, da Benutzer bei der Eingabe mit Tab-Taste fokussiert kann), dann werden Sie verwenden:

$("input").focus(){...};

Aber wenn Sie Funktion wollen, die, wenn Benutzer unfocus von Eingangs arbeiten (klicken Sie außerhalb oder drücken Sie Tab-Taste oder Chrom Registerkarte ändern - was auch immer), dann werden Sie verwenden:

$("input").blur(){...};

Quelle

2017-06-15 21:48:59

Der beste Weg zum Verwischen jQuery

Antwort

Verwandte Themen