Die von meiner jQuery-Funktion erzeugte Animation ist zittrig und ich habe verschiedene SO-Lösungen durchgespielt, z. B. das Hinzufügen von jquery.easing, aber kein Glück. Ist das Problem die iframes in jedem div?
Irgendwelche Ideen, wie Sie die Animation glätten können? Ist meine grundlegende Umschaltfunktion der beste Weg?
JSFiddle: Ссылка
Das grundlegende Markup ist unten und wird mehrmals auf der Seite wiederholt (mit Textblöcken zwischen jedem "videotogle" div):
%Vor%Und die Funktion:
%Vor%Andrew's Lösung ist korrekt, aber ich würde immer noch das CSS so setzen (wenn Javascript deaktiviert ist): .Videoblock {Breite: 560px; Höhe: 315px; Überlauf: versteckt}
und fügen Sie die simultane Animation hinzu:
%Vor%Hier ist der Link zum Finale: Ссылка
Schauen wir uns das mal an!
Ich bin mir nicht sicher, wie viele dieser Iframes hier auf einer Seite geladen werden, aber eine Sache scheint sehr sicher zu sein; Wenn Sie einen zu viel haben, haben Sie genug Iframes mit genug Youtube Videos geladen.
Was bedeutet, unnötige Lasten. Der Benutzer darf nicht auf alle diese Links klicken. Der Benutzer kann nicht alle diese Videos ansehen.
Also:
Es gibt ein unnötiges Aufblähen der Ressourcen und einen unnötigen Verbrauch der Bandbreite des Benutzers.
Und außerdem ist das nicht skalierbar. Beachten Sie, dass Sie 50 dieser Links auf einer Seite benötigen. OK. Nimm nur 10. Auch das ist ziemlich viel!
Ich mache mir gerade ein Problem. Wird es hier posten, wenn fertig!
Für welchen Browser suchen Sie hauptsächlich? Wenn es sich um einen der Webkit-Browser oder FireFox handelt, können Sie die hardwarebeschleunigten CSS3-Übergänge mit einem jquery-Fallback nutzen.
Ich glaube nicht, dass jQuery easing derzeit CSS3-Übergänge als erste Option verwendet, aber korrigiere mich, wenn ich falsch liege.
Sehen Sie sich an: Ссылка
Es wäre nicht allzu mühsam, etwas mit CSS3 zu hacken.
Gibt es einen bestimmten Grund, warum Sie ein Akkordeon-Plugin nicht direkt verwenden möchten? Die jQuery UI-Bibliothek sollte sich darum kümmern.
Falls das nicht wie erwartet funktioniert, können Sie auch css3-Animationen ausprobieren? Sie können einen Kern von CSS3-Animationen hier finden: Ссылка
Sie müssen zwei Klassen erstellen, eine mit div-hide , die height: 0 hat und eine mit div-show , die die erforderliche height Menge hat. Wann immer Sie umschalten möchten, ändern Sie einfach die Klasse mit jQuery.
IMO, mit CSS3 wäre eine gute Option, wenn Ihre Zielgruppe moderne Browser verwendet. Wenn nicht, können Sie mit Modernizr die Art und Weise ändern, wie die Dinge je nach verwendetem Browser funktionieren.
Tags und Links jquery removeclass slidetoggle jquery-easing