the-unknown
Ensign
- Registriert
- Sep. 2011
- Beiträge
- 182
Hallo.
Wieder eine schwer findbare gescheite Überschrift. Sorry dafür.
Zum Problem:
Ich mache eine Animation mit jQuery. Ich will eine Landschaft in einer bestimmten Zeit durchs Bild scrollen, wenn diese Animation fertig ist soll er ohne Übergang und Stocken wieder bei 0 anfangen.
Hier mal mein bisheriger Code, wo er dann nur einen Durchgang macht.
Im Zusammenhang bin ich auf folgenden Code gestoßen, bei dem ich denke, er sollte hilfreich sein.
Diesen Code wollte ich nutzen, um die normale Animation in einer bestimmten Zeit ablaufen zu lassen, und dann innerhalb von 0s am Ende im 2. Schritt das Bild wieder auf Start zu setzten, um es aufs neue zu animieren.
Nun das Hauptproblem:
Ich bekomme es irgendwie nicht hin, die Zeit für die Animation einzufügen. Er schmeißt in Dreamweaver immer Fehler raus.
Für mein Empfinden sollte es ungefähr so aussehen:
Vllt findet ihr ja den Fehler. Ich komme nicht drauf.
Grüße
Wieder eine schwer findbare gescheite Überschrift. Sorry dafür.
Zum Problem:
Ich mache eine Animation mit jQuery. Ich will eine Landschaft in einer bestimmten Zeit durchs Bild scrollen, wenn diese Animation fertig ist soll er ohne Übergang und Stocken wieder bei 0 anfangen.
Hier mal mein bisheriger Code, wo er dann nur einen Durchgang macht.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style type="text/css">
#landschaft{
position:absolute;top:0px;left:0px;
background-image: url(../Auftrag%20eins%20Bilder/landschaft%20lang.png);
width:3500px;
height:400px;
z-index:2;
}
#wald {
position:absolute;top:0px;left:/*295*/0px;
background-image:url(../Auftrag%20eins%20Bilder/landschaft%20lang%20jquery.png);
width:1690px;
height:400px;
z-index:1;
}
#Himmel{
position:absolute;top:0px;left:/*295*/0px;
background-image:url(../Auftrag%20eins%20Bilder/Himmel.jpg);
width:1798px;
height:400px;
z-index:0;
}
#bahn{
position:absolute;top:0px;left:/*295*/0px;
background-image:url(../Auftrag%20eins%20Bilder/zug%20jquery.png);
width:550px;
height:400px;
z-index:3;
}
</style>
<script language="JavaScript"> function newWindow(URL) { myPopup=window.open(URL,'popupWindow','toolbar=0,location=0,' + 'directories=0,status=0,menubar=0,resizable=0,scrollbars=0,' + 'width=550,height=400,left=20,top=50'); } </script>
</head>
<body>
<a href="#">
<div class="Himmel" id="Himmel">
</div>
<div class="wald" id="wald">
</div>
<div id="bahn" class="bahn">
</div>
<div class="landschaft" id="landschaft">
</div>
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
$("#landschaft").animate({marginLeft: "-2950px"}, 40000, "linear");
$("#wald").animate({marginLeft: "-1140px"}, 40000,"linear");
$("#bahn").animate({marginLeft: "575px"}, 40000, "linear");
$("#Himmel").animate({marginLeft: "-1248px"}, 40000, "linear");
});
});
</script>
</body>
</html>Im Zusammenhang bin ich auf folgenden Code gestoßen, bei dem ich denke, er sollte hilfreich sein.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style type="text/css"> </style>
</head>
<body>
<div id="box"></div>
<div id="box2"></div>
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").css({
"width": 150,
"height": 150,
"marginBottom": 20,
"background": "blue"
})
$("div").click(function(){
<!--Endlosschleife mit Plsieren-->
jQuery.fn.pulsieren = function(){
$(this).each(function(){
if (this.zustand) {
this.zustand = 0;
$(this)
.animate({
"marginLeft": 0
},
function(){
$(this).pulsieren();
});
} else {
this.zustand = 1;
$(this).animate({
"marginLeft": 300,
},
function(){
$(this).pulsieren();
});
}
});
}
$("#box, #box2").pulsieren();
});
});
</script>
</body>
</html>Diesen Code wollte ich nutzen, um die normale Animation in einer bestimmten Zeit ablaufen zu lassen, und dann innerhalb von 0s am Ende im 2. Schritt das Bild wieder auf Start zu setzten, um es aufs neue zu animieren.
Nun das Hauptproblem:
Ich bekomme es irgendwie nicht hin, die Zeit für die Animation einzufügen. Er schmeißt in Dreamweaver immer Fehler raus.
Für mein Empfinden sollte es ungefähr so aussehen:
HTML:
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").css({
"width": 150,
"height": 150,
"marginBottom": 20,
"background": "blue"
})
$("div").click(function(){
<!--Endlosschleife mit Plsieren-->
jQuery.fn.pulsieren = function(){
$(this).each(function(){
if (this.zustand) {
this.zustand = 0;
$(this)
.animate({
"marginLeft": 0
},
400,);
function(){
$(this).pulsieren();
});
} else {
this.zustand = 1;
$(this).animate({
"marginLeft": 3000
},
400,);
function(){
$(this).pulsieren();
});
}
});
}
$("#box, #box2").pulsieren();
});
});
</script>Vllt findet ihr ja den Fehler. Ich komme nicht drauf.
Grüße
