| Autor |
Nachricht |
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: 
|
Verfasst Fr 19.02.2010 13:45
Titel [JavaScript] - Vertikal Sliden |
  |
|
Hallo zusammen,
habe mir ein kleines Script geschrieben welches ein Element in einem Elternelement von unten nach oben schiebt.
Dies geschieht eine bestimmte anzahl an Schleifendurchläufen.
Jetzt ist es so das sobald das Kindelement außerhalb des Viewports des Elternelements geschoben hat und wieder nach unten geschoben wird der Start ein wenig verzögert wieder anläuft.
JS
| Code: | $(document).ready(function(){
var i = 0;
var hoehe = $("#move").height();
while (i < 10){
$('#move').animate({
marginTop: "-" + hoehe + "px",
}, 20000 );
$('#move').animate({
marginLeft: "236px",
}, 1 );
$('#move').animate({
marginTop: hoehe + "px",
}, 1 );
$('#move').animate({
marginLeft: "0px",
}, 1 );
i = i + 1;
}
}); |
HTML
| Code: | <div class="con-slider-sidebar">
<div id="move">
lorem ipsum<br />
lorem ipsum<br />
lorem ipsum<br />
lorem ipsum<br />
lorem ipsum<br />
lorem ipsum<br />
lorem ipsum<br />
lorem ipsum<br />
lorem ipsum<br />
lorem ipsum<br />
lorem ipsum<br />
lorem ipsum<br />
ende
</div>
</div> |
CSS
| Code: | .con-slider-sidebar {
position:relative;
width:236px;
height:166px;
border:1px dashed #ccc;
overflow:hidden;
}
.con-slider-sidebar #move {
display:block;
} |
Hat mir jemand einen Tipp wie ich es schaffe das sobald #move rausgeschoben wird es natlos unten wieder nach oben geht? Ohne das es die Pause gibt?
Sollte ich evtl 2 Kindelemente anlegen und diese nacheinander animieren?
Vielen Dank.
// So funktioniert es. Hatte einen dummen fehler drin
| Code: | $(document).ready(function(){
var i = 0;
var elem = $('#move');
var hoehe = $("#move").height();
hoehe = hoehe + 10;
while (i < 500){
$('#move').animate({
marginTop: "-" + hoehe + "px",
}, 20000 );
$('#move').animate({
marginLeft: "236px",
}, 1 );
$('#move').animate({
marginTop: "140px",
}, 1 );
$('#move').animate({
marginLeft: "0px",
}, 1 );
i = i + 1;
}
}); |
Ich kann natürlich nicht die Größe des <div> wieder als Marginwert angeben.
Zuletzt bearbeitet von Kash am Fr 19.02.2010 14:20, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Fr 19.02.2010 15:45
Titel Re: [JavaScript] - Vertikal Sliden |
|
|
mich wundert, dass du keine timingprobleme mit deinen animationen bekommst.
du chainst die sachen nicht und verwendest keine callbackfunktionen - du feuerst also quasi 10 animationen mehr oder weniger gleichzeitig ab.
der sinn von animate in einer milisekunde erschließt sich mir auch nicht ganz - theoretisch könntest du das ganze doch auch einfach per css() setzen.
wenn ich das ganze also richtig verstehe, meinst du sowas:
| Code: |
// variablen initialisieren
var hoehe = 0;
var moveContainer;
$(document).ready(function(){
// variablen schon mal cachen - jeder aufruf von $('irgendwas') ruft die Funktion auf, die dieses element sucht, was sehr viel performance frisst.
moveContainer = $('#move');
// s.o. - die höhe des containers ändert sich ja nicht also reicht es sie ein mal auszulesen.
hoehe = moveContainer.height();
// nun die funktion aufrufen, die den kram bewegt. ich habe ihr einen parameter spendiert wie oft sie sich selbst noch aufrufen soll.
moveUp(10);
});
function moveUp(amount) {
// die eigentliche animation starten
moveContainer.animate({
marginTop: "-" + hoehe + "px",
},20000,function() { // diese funktion wird ausgeführt, sobald die animation durchgelaufen ist.
amount--; // amount um einen zähler verringern
if(amount>=1) {
// das zu bewegende element wieder "nullen"
moveContainer.css("marginTop",0);
// und wieder von vorn... dieses mal mit einem zähler weniger.
moveUp(amount);
}
});
}
|
// mit kommentaren versehen
Zuletzt bearbeitet von sahnemuh am Fr 19.02.2010 15:56, insgesamt 3-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Fr 19.02.2010 16:02
Titel
|
|
|
Danke für Deinen Tipp. Ja so sauber läuft das noch nicht.
Und an einer Fallbacklösung sitze ich gerade.
Ich werde mich bei Gelegheit Deiner Lösung mal annehmen.
Das wird bis in 2 Wochen sowieso nicht publiziert.
Nur um den Kunden zu zeigen wie es in etwa läuft.
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Fr 19.02.2010 16:17
Titel
|
|
|
achso. was dein problem löst ist übrigens das "animate" vom standardverhalten des easings ("swing"), welches am anfang und ende der animation etwas langsamer läuft auf "linear" umzustellen.
ich hab' das ganze mal hier zusammengebastelt:
http://jsfiddle.net/VkYLu/1/
|
|
| |
|
|
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Fr 19.02.2010 16:20
Titel
|
|
|
| sahnemuh hat geschrieben: | achso. was dein problem löst ist übrigens das "animate" vom standardverhalten des easings ("swing"), welches am anfang und ende der animation etwas langsamer läuft auf "linear" umzustellen.
ich hab' das ganze mal hier zusammengebastelt:
http://jsfiddle.net/VkYLu/1/ |
Super, 'liniear' scheint einiges in diesem Fall zu bewirken.
Danke für dieses Bsp.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
iframe per javascript vertikal scrollen
Javascript Code von vertikal auf horizontal
[Javascript] iframe horizontal UND vertikal scrollen
automatisch mit javascript horizontal und vertikal scrollen
DIV auf/zu sliden
Wie begrenze ich mein Panorama beim Sliden?
|
|
Willkommen auf dem Portal für Mediengestalter
