Code: ( Sehen Sie es in Aktion )
%Vor%Hinweis: Die Fade-Funktion könnte kleiner sein, aber in dieser Form können Sie sie für jedes Element und jede Dauer einfach wiederverwenden. Viel Spaß!
Sie können einen Einblendeffekt für den Körper wie Google mit dem folgenden Code erstellen. Bitte beachten Sie, dass dies eine ähnliche Funktionalität wie Google haben wird. Sie können diese Technik auf jedes Element mit dem richtigen Event-Handler anwenden.
%Vor%Sie möchten den Ereignishandler dem Hauptteil des Dokuments hinzufügen, wie Sie es normalerweise tun. Stellen Sie sicher, dass Sie die Funktion fadeIn so ändern, dass Informationen aus dem Ziel / srcElement abgerufen werden, wenn Sie sich für eine Anhangsmethode entscheiden, die keine Argumente akzeptiert. Oder Sie können gewünschte Werte und Objekte in die Funktion fest einbetten:
Inline:
%Vor%DOM Level 0:
%Vor%DOM Level 2:
%Vor%Sie sollten auch eine CSS-Regel für das body-Element einrichten, um sicherzustellen, dass es beim Laden der Seite nicht sichtbar ist:
%Vor%Ich habe diesen Code überprüft, damit er in IE8, Chrome, Safari, FireFox und Opera korrekt funktioniert. Viel Glück.
Verwenden von CSS3-Animationen für alle, die es zu diesem Zeitpunkt unterstützen.
%Vor% Im obigen Beispiel wird, wenn wir opacity für den Körper ändern, ein Fade-Effekt mit 0.3 Sekunden linear ausgeführt. Befestige es nur einmal an der Maus.
Siehe google.com hier umgestaltet :) Nur Chrome und Safari.
Tags und Links javascript fade mouse movement