Gibt es ein Skript / einen Weg, der normales CSS :hover weicher macht?
Idee wäre, dass Sie zwei Klassen vielleicht mit Gradienten Hintergrund bekommen, und das Skript würde die Klassen reibungslos tauschen. So würden die Farbverläufe wie auf Knopfdruck aussehen. Sollte automatisch sein, also rufen Sie den Trigger: $('.someclass').SmoothTransition(); und es würde automatisch die .someclass:hover als zweite Klasse verwenden.
Kopfgeld bearbeiten
Das ist eigentlich eine sehr interessante Frage, die von mir teilweise beantwortet wurde. Das Problem mit meiner Antwort ist, dass es nur für eine durchgehende Hintergrundfarbe funktioniert und nicht mit CSS-Gradienten oder anderen spezifischen Parametern arbeitet.
Dieses Skript sollte in jeder jQuery-Entwicklerbibliothek ein Muss sein. Also, ich biete 150 Rep für jeden, der einen Weg finden oder eine gute Ressource finden kann, die dies tun kann.
Wenn Ihre Methode (einzelnes jQuery-Plugin) für alle diese Beispiele funktioniert, haben Sie gewonnen!
Beispiele: Ссылка
Moderne Tage bearbeiten
Da diese Frage im Jahr 2011 beim Übergang der CSS gestellt wurde, war kommerzielles Spiel keine Option. Dann verstehe, warum in dieser Frage alles auf JS und nicht auf CSS fokussiert ist. Aus diesen Antworten entwickelte ich ein JS-Skript, das zu der Zeit perfekt war. Es ist nicht mehr, CSS-Übergänge sind jetzt die ultimative Lösung, so dass die richtige Antwort wieder akzeptiert wurde.
Sie können css3-Übergänge verwenden, um das zu erreichen.
Ein Beispiel:
%Vor%Sie können das hier lebend hier überprüfen.
Das Beispiel wurde mit statischen Farben angegeben, aber Sie können auch css3-Verläufe verwenden:
%Vor%Funktioniert in Chrome, Safari für Windows und Opera. Firefox und IE haben eine schlechte Unterstützung für CSSRules-Objekte, daher sind die Ergebnisse bestenfalls zweifelhaft. Ich werde weiter daran arbeiten, um zu sehen, ob ich die Probleme beheben kann.
Die CSS-Stile müssen auch optimiert werden. Da im letzten Beispiel dem :hover Selektor keine Hintergrundfarbe zugewiesen wurde, gibt es keine Hintergrundfarbe für das neue Element.
Wenn jemand Ideen für dieses Zeug hat, würde ich sie gerne hören.
BEARBEITEN: BEHOBEN
Das funktioniert besser. Ich durchsuche alle css-Regeln für :hover selectors, dann speichere ich den CSS-Text, der dieser Regel zugeordnet ist, und die non: hover-Regel als JavaScript-Objekt, das in $().css() eingefügt werden kann. Danach berechne ich die tatsächliche "Hover-Klasse" mit $.extend() , um die Hover-Klasse auf die normale Klasse zu erweitern. Wenn in der Klasse :hover kein Hintergrund definiert ist, wird auf diese Weise immer noch der Hintergrund der normalen Klasse angezeigt.
Schließlich erstelle ich ein Element und positioniere es direkt unter dem ursprünglichen Element, befreie das, was CSS den Hover macht, füge meinen normalen Stil zum Original hinzu und meinen berechneten Hover-Stil für das neue Element darunter.
Danach müssen wir lediglich die Deckkraft bei Mausereignissen animieren. Einfach!
Ссылка Dieses Projekt ermöglicht Transformationen in allen gängigen Browsern mit Ausnahme von ie7 und ie6. Es hat progressive Verbesserung für diese 2 Browser
Also die Lösung, nach der ich gesucht habe, ist diese:
%Vor%Sehen Sie sich die Live-Demo an: Ссылка
HINWEIS: Funktioniert nicht mit CSS3-Gradienten. Aber immer noch ..
Es ist wirklich hart, aber ich habe eine Geige , die (theoretisch) in verschiedenen Browsern funktionieren sollte mit welchem Bild auch immer du willst. Gerade jetzt ist es ein bisschen hacky (lese extrem), aber es ist ein guter Anfang und wird vielleicht Leute auf dem Weg zu einer vollständigen Antwort bringen. Außerdem funktioniert es im Moment nicht, wenn Sie es schnell machen. Die Schaltfläche muss vollständig ein- oder ausgeblendet werden, bevor die Maus das Element verlässt. Wie gesagt, hacky aber ein Anfang.
Ich habe endlich den ULTIMATIVEN Weg gefunden, einen fließenden Übergang beim Schweben zu haben. Ich hoffe, dass dies anderen mit dem gleichen Problem helfen wird. Meine aktuellen Tests zeigen, dass dies zu 100% für alle Beispiele funktioniert, die ich mir vorstellen kann. Funktioniert für Hyperlinks und normale Container.
Dieses Plugin hat 3 Optionen.
Wenn Sie Ideen haben, wie Sie dieses Plugin optimieren können, kontaktieren Sie mich oder hinterlassen Sie einen Kommentar:)
Tags und Links class jquery transition smooth