Ich versuche, etwas, das sie bei gimmebar.com / p>
Wenn Sie auf ein Bild klicken, wird die aktuelle Seite des Inhalts nach links verschoben und ausgeblendet. Die Zielseite wird eingeblendet und von rechts eingefügt.
Ich habe ein paar Dinge ausprobiert, zum Beispiel das Erstellen von zwei divs in einem Container mit einer Breite von 200% und das Scrollen des Inhalts, um JqueryUI anzuzeigen und zu verwenden und die divs zu verschieben. Das Scrollen scheiterte, weil die divs sich überhaupt nicht bewegten und srollLeft immer 0 war, egal was geschah. Die Rutsche hat etwas besser funktioniert, aber für mich scheint es, dass sie nicht gleichzeitig laufen. Das zweite div erscheint einfach in der Existenz anstatt schön hinter dem ersten hinein zu gleiten.
%Vor%Es scheint so, als sollte es so einfach zu erreichen sein, aber ich stecke fest.
Mach's gut.
Bearbeiten: Ich habe es irgendwie zum Laufen gebracht, wie man in dieser Geige sehen kann . Die Folie ist da, aber ich kann nicht verblassen sehen. Es könnte auch einen besseren Weg geben, dies zu erreichen, aber ich bin ziemlich zufrieden damit, dass ich kein drittes lib / plugin laden muss, nur um ein div zu verschieben.
Ссылка Ich habe ein Tutorial von ihrem Entwickler gefunden. Denken Sie, dass das als Lösung zählen würde.
Eine reine JavaScript-Lösung: im CSS:
%Vor%im HTML:
%Vor%Das div-Element newContent wird zunächst ausgeblendet, da sich seine linke Kante am rechten Rand des übergeordneten div-Wraps befindet. Das CSS weist den Browser an, jeden Inhalt auszublenden, der das übergeordnete div überläuft.
Um den versteckten Inhalt anzuzeigen, setzen Sie einen Timer, der die style.left für das innere div schrittweise von 100% auf 0% verringert und die Deckkraft von 0 auf 1 erhöht. Ich habe ein Klasse zum Öffnen / Schließen von Swipey-Menüs , die leicht angepasst werden könnte, um dies zu tun. (EDIT: eine neuere Version )
Ich würde empfehlen, dass Sie dieses jQuery-Skript verwenden, das ich vor nicht allzu langer Zeit in einer Website verwendet habe und es funktionierte wie ein Zauber, der CODA SLIDER
Viel Glück
Tags und Links javascript jquery jquery-ui