Hallo,
ich habe folgendes Problem:
es gibt 3 div-boxen welche ähnlich wie bei Apfelprodukten durch seitlich-fahrende Animation aufgerufen werden sollen.
Generell funktioniert mein Vorhaben, wenn ich mich auf der Startseite befinde.
Bin ich aber auf Seite 2, übernimmt er die JQuery Eigenschaften des Verschiebens -> Dieses versuchte ich durch eine ITE-Auswahl zu umgehen.
Leider ohne Vergnügen - jetzt blockt es das ganze komplett.
Habt ihr einen Vorschlag für eine Lösung oder findet den Fehler?
Danke
<!DOCTYPE html>
<html>
<head>
<style>
body, html { overflow: hidden; }
#navi {
position:relative;
background-color:#abc;
margin: 10px auto auto auto;
width:110px;
height:30px;
}
#div1 {
position:relative;
background-color:#abc;
margin: 50px auto auto auto;
width:500px;
height:800px;
}
#div2 {
position:absolute;
background-color:#abc;
width:500px;
height:800px;
margin: -800px 0 0 2000px;
}
#div3 {
position:absolute;
background-color:#abc;
width:500px;
height:800px;
margin: -800px 0 0 3290px;
}
</style>
<script src="http://code.jquery.com/jquery-
latest.js"></script>
</head>
<body>
<div id="navi">
<button id="b1">b1</button>
<button id="b2">b2</button>
<button id="b3">b3</button>
</div>
<div id="div1" class="block"></div>
<div id="div3" class="block"></div>
<div id="div2" class="block"></div>
<script>
var page=1;
if (page=1)
{
$("#b1").click(function(){
$(".block").animate({"left": "+=0px"}, "slow");
page=1;});
$("#b2").click(function(){
$(".block").animate({"left": "-=1290px"}, "slow");
page=2;
});
$("#b3").click(function(){
$(".block").animate({"left": "-=2580px"}, "slow");
page=3;
});
}
else (if (page=2))
{
if (page=2) {
$("#b1").click(function(){
$(".block").animate({"left": "+=1290px"}, "slow");
page=1;});
$("#b2").click(function(){
$(".block").animate({"left": "-=0px"}, "slow");
page=2;
});
$("#b3").click(function(){
$(".block").animate({"left": "-=1290px"}, "slow");
page=3;
});
}
else (if (page=3))
{
$("#b1").click(function(){
$(".block").animate({"left": "+=2580px"}, "slow");
page=1;});
$("#b2").click(function(){
$(".block").animate({"left": "+=1290px"}, "slow");
page=2;
});
$("#b3").click(function(){
$(".block").animate({"left": "-=0px"}, "slow");
page=3;
});
}
</script>
</body>
</html>