nicht angemeldet
Text soll sich nach unten bewegen und oben wieder erscheinen
Gunnar BittersmannHallo,
ich bin jetzt schon länger dabei, den Text im unterem Code zum Laufen zu bringen, also der Text sollte sich nach unten bewegen und die Zeilen, die untern verschwinden, sollten oben wieder erscheinen.
Weiß jemand, wie ich das machen kann. Ich hab es mit unterem Code mal versucht, aber leider ohne Erfolg.
Vielleicht hat da ja jemand eine Idee dazu.
Besten Dank,
lg
Generic
1\.<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<script type="text/javascript" language="javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function functionTest() {
$("#infoText").animate({
top: "+=80%",
marginTop: "0.6in", opcaity: 0.9 },5500);
}
</script>
</head>
<body>
<div id="infoText">
asdasdfadsf<br />
asdfasdf<br />
asdfasfa<br />
asdfasdf<br />
adfasdfas<br />
asdfasdf<br />
asdf<br />
asdfasd<br />
fadf
</div>
<input type="button" name="Text 2" value="Text 2 anzeigen" onclick="functionTest()">
</body>
</html>
-
ich bin jetzt schon länger dabei, den Text im unterem Code zum Laufen zu bringen, also der Text sollte sich nach unten bewegen und die Zeilen, die untern verschwinden, sollten oben wieder erscheinen.
Das was du bisher gemacht hast - nebst der syntaxfehler - sorgt bestenfalls dafür (wenn du es richtig machst) dass sich der komplette Kasten (wo auch immer er steht) irgendwohin verschiebt und seinen Außenabständ ändert, zusätzlich ändert er seine Deckkraft. In Summe dauert das 5,5 Sekunden.
Weiß jemand, wie ich das machen kann. Ich hab es mit unterem Code mal versucht, aber leider ohne Erfolg.
Wie wäre es mit Hirn und Versand zu arbeiten und nicht einfach irgendwas auszuprobieren?
[code lang=html]
Da fehlt der Doctype.
1.<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
Dein Text ist offensichtlich nicht in der Sprache en-us verfasst, er ist eindeutig deutsch.
<head>
<script type="text/javascript" language="javascript" src="jquery-1.4.4.min.js"></script>
Das language-Attribut ist überflüssig.
<script type="text/javascript">
function functionTest() {
$("#infoText").animate({
top: "+=80%",+=80% ist kein gültiger Wert für top
marginTop: "0.6in", opcaity: 0.9 },5500);
Inch, bist du dir sicher?
}
</script>
</head>
<body>
<div id="infoText">
asdasdfadsf<br />
asdfasdf<br />
asdfasfa<br />
asdfasdf<br />
adfasdfas<br />
asdfasdf<br />
asdf<br />
asdfasd<br />
fadf
</div><input type="button" name="Text 2" value="Text 2 anzeigen" onclick="functionTest()">
Wie wäre es, wenn du die events anhängst jQuery stellt hier bind() zur Verfügung. Ein onclick-Attribut ist nicht sinnvoll.
Schritt 1: bevor du irgendwas mit jQuery oder JavaScript machst: bau dir ein ordentliches, valides HTML-File mit ordentlichem Code. Eine unsortierte Liste anstatt einer div-Suppe ist für dein vorhaben empfehlenswert.
Schritt 2: formatiere dieses HTML mit CSS so, dass es statisch passt.
Schritt 3: überlege, was passieren muss, dass du das Gewünschte erreichst
Etwa so:
a) Oberstes Element in der Liste wird z.B. mit einem negativen Margin um seine eigene Höhe nach oben verschoben und gleichzeitig auf auf 0 opacity reduziert
b) Oberstes Element (nunmehr unsichtbar) wird aus dem DOM-Entfernt, sämtliche Eigenschaften für das nunmehr neue oberste Element werden sofort auf die Standardwerte zurückgesetzt
c) Das Vormals oberste Element wird unten in das DOM-eingehängt, auf Standardvorgaben zurückgesetzt (außer opacity) und dann auf opacity 1 zurückanimiert.
d) Starte erneut bei a)Schritt 4: erstelle einzelne CSS- und HTML-Schnipsel für die Zwischenschritte deiner Animation
Schritt 5: sorge dafür, dass diese Schnipsel durch eine Animation oder vergleichbares ersetzt werden.
-
Besten Dank für deine Hinweise,
Ich bin normal Backend- Programmierer, da ist es nicht so einfach ...
Ich war eben der Meinung, sowas würde ich inrgendwo im Netz finden, aber schaut nicht so aus. Demnach wird mir nichts anderes übrig bleiben als das ich es selber machen muss.
lg-
Ich bin normal Backend- Programmierer, da ist es nicht so einfach ...
Das ist eine Schwache ausrede :) wenn ich mir z.B. das Backend von TYPO3 ansehe, möchte ich kein Backend-Programmierer sein :p
Ich war eben der Meinung, sowas würde ich inrgendwo im Netz finden, aber schaut nicht so aus.
Hört sich nicht danach an, als hättest du wirklich gesucht. Solche "Ticker" finden sich im Netz massenweise - da gibts wahrscheinlich gut 20 jQuery-Plugins die genau das tun.
Demnach wird mir nichts anderes übrig bleiben als das ich es selber machen muss.
Ist wahrscheinlich besser, denn mit der Suche[1] verplemperst du wesentlich mehr Zeit, als wenn du dir die 10 Zeilen Code schnell selbst zusammenschreibst.
[1] dem einlesen in die Doku, dem ärgern dass das Ding doch nicht alles kann, dem wechsel zu einer anderen Lösung, dem weiterärgern und dann anpassen, dann feststellen, dass man doch wieder eine andere Lösung braucht.
-
-
Hi,
nur eine kleine Anmerkung, da der Rest fachlich hilfreich ist:
$("#infoText").animate({
top: "+=80%",
+=80% ist kein gültiger Wert für topEs ist, ist es nicht?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
top: "+=80%",[/code]
+=80% ist kein gültiger Wert für topEs ist, ist es nicht?
+=80 wäre gültig - das würde im Falle von 10% ein 90% draus machen oder im Falle von 50px ein 130px
Aber += als Vorsatz UND eine Einheit hinten dran ist lt. Doku nicht vorgesehen.
-
+=80 wäre gültig - das würde im Falle von 10% ein 90% draus machen oder im Falle von 50px ein 130px
Ich muss mich korrigieren ohne Einheit werden IMMER Pixel draus.
Aber += als Vorsatz UND eine Einheit hinten dran ist lt. Doku nicht vorgesehen.
Und beides ist auch möglich - allerdings reagiert die %-Sache anders als erwartet.
50px +=10% ist nicht wie erwartet 55 Pixel sondern 50 Pixel + 10% der breite des Elternelements.
-
-
-
-
@@Umlauf:
nuqneH
ich bin jetzt schon länger dabei
den Text im unterem Code zum Laufen zu bringen, also der Text sollte sich nach unten bewegen und die Zeilen, die untern verschwinden, sollten oben wieder erscheinen.
Und welcher Teil davon rechtfertigt dein Doppelposting?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)