Próbuję odtworzyć something like they've got over at gimmebar.com.Przesuwanie zawartości/zmiana strony
Po kliknięciu obrazu, bieżąca strona zawartości przesuwa się w lewo i zanika. Strona docelowa pojawia się i przesuwa z prawej strony.
Próbowałem już kilku rzeczy, takich jak tworzenie dwóch elementów div w kontenerze o szerokości 200% i przewijanie zawartości w celu wyświetlenia i używania JqueryUI i przesuwania elementów div. Przewijanie zakończyło się niepowodzeniem, gdy elementy div nie są w ogóle poruszane, a parametr srollLeft zawsze wynosi 0, niezależnie od tego. Slajd działał nieco lepiej, ale wydaje mi się, że nie działają one jednocześnie. Drugi div po prostu pojawia się zamiast ładnie przesuwać się tuż za pierwszym.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
.container {
width: 100%;
float: left;
height: 800px;
}
#one {
background-color: red;
}
#two {
background-color: #333;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div class="container" id="one"></div>
<div class="container" id="two"></div>
<script>
$(document).click(function() {
$("#one").hide("slide", { direction: "left" }, 1000);
$("#two").show("slide", { direction: "left" }, 1000);
});
</script>
</body>
</html>
Wygląda na to, że powinno być tak łatwo osiągnąć, ale utknąłem.
Uważaj.
Edytuj: W pewnym sensie udało mi się go uruchomić, jak widać w this fiddle. Slajd jest tam, ale nie widzę żadnego zanikania. Może być lepszy sposób na osiągnięcie tego, ale jestem całkiem zadowolony z tego, że nie trzeba ładować trzeciej biblioteki/wtyczki, aby przesunąć element div.
http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios Znaleziono poradnik napisany przez ich programistę. Myślę, że to się liczy jako rozwiązanie.
Deweloper prowadzi teraz do projektu obserwacyjnego o nazwie [Liquid Slider] (http://liquidslider.com/). –