Antworten: 18
Seite [1] |
|||
reVerB Geekboy Beiträge: 1237 |
# Thema - 04.06.2011 um 17:27 Uhr
Ich wollte mir mal so aus Spaß einen JS-Hovereffekt basteln, der mir Links als Block vergrößert. Nur dieses mal möchte ich das so machen, das kein Eventhandler in den HTML-Tags steht. Nur das Teil will nicht. Er vergrößert immer nur um einen Pixel. Danach wars das auch schon. Da funktioniert die Rekursion bei setTimeout nicht richtig. ich weiß nur nicht, warum. Kann mir da einer helfen? Anbei der Code:
Zuletzt editiert von reVerB am 04.06.2011 um 17:31 Uhr (2x Editiert)
|
||
Inaktiv |
|
||
sgraewe Supporter Beiträge: 6116 |
# Antwort: 1 - 04.06.2011 um 18:27 Uhr
hm kann dir leider nicht helfen, aber warum machste das nicht mit css? =) |
||
Inaktiv |
|||
reVerB Thread-Ersteller Geekboy Beiträge: 1237 |
# Antwort: 2 - 04.06.2011 um 19:23 Uhr
Mit CSS eine weiche Vergrößerung? Wie soll das denn gehen? Ich will ja, das der Button nicht auf einmal größer wird sondern langsam immer größer wird. |
||
Inaktiv |
|||
sgraewe Supporter Beiträge: 6116 |
# Antwort: 3 - 04.06.2011 um 19:56 Uhr
css3 transition |
||
Inaktiv |
|||
reVerB Thread-Ersteller Geekboy Beiträge: 1237 |
# Antwort: 4 - 04.06.2011 um 20:10 Uhr
Ach interessant. Aber die Unterstützung ist da aber von den Browser nicht so pralle. |
||
Inaktiv |
|||
SlayR Geekboy Herkunft: Calbe (Saale) Beiträge: 1133 |
# Antwort: 5 - 04.06.2011 um 20:26 Uhr
Sollte aber sehr bald sein. Transtition ist eine, vom w3c abgesegnete, CSS3 Eigenschaft. Alle aktuellen browser, inklusive dem IE9 unterstützen dies. Quelle: http://www.normansblog.de/demos/browser-support-checklist-css3/. Ich nutze den Transtition-Effekt zusammen mit einer 1%'gen Vergrößerung z.B. in meinem Admin-Bereich von Clansphere. Vorteil: Browser die die Funktion nicht unterstützen haben keine Nachteile, die Eigenschaften werden dann einfach ignoriert. ------------------ --- CLANSPHERE ---
Professional clan care starts here |
||
Inaktiv |
|||
reVerB Thread-Ersteller Geekboy Beiträge: 1237 |
# Antwort: 6 - 04.06.2011 um 20:47 Uhr
Ok. Ich hab das ganze jetzt mal so gemacht:
Die Animation sprich der langsame Übergang bleibt aber aus. Er aktiviert das ganze sofort. |
||
Inaktiv |
|||
SlayR Geekboy Herkunft: Calbe (Saale) Beiträge: 1133 |
# Antwort: 7 - 04.06.2011 um 20:52 Uhr
Bei mir sieht's (wie gesagt für die Buttons Einstellungen, Verwaltung, System) so aus:
Und das funktioniert auf jeden Fall. ------------------ --- CLANSPHERE ---
Professional clan care starts here |
||
Inaktiv |
|||
reVerB Thread-Ersteller Geekboy Beiträge: 1237 |
# Antwort: 8 - 04.06.2011 um 20:55 Uhr
Interessant. Als ich jetzt Transform auf all gesetzt habe, hat er das gemacht. Dann lass ich das jetzt so ^^ Habe es aber nicht mit Scale gemacht, sondern einfach nur die Größe angepasst. LÄUFT !! ^^ Danke ... PS: Uff selbst der IE9 bekommt das net gebacken. Armutszeugnis... LOL: Das sehe ich jetzt erst. Der IE9 kann kein Box-Shadow, kein Border-Radius. kein Text-Shadow und natürlich kein Transitions. Das ist doch mist ey. Nach neuinstallation von IE 9 geht das meiste. nur Transitions eben nicht. DOOF. Zuletzt editiert von reVerB am 04.06.2011 um 22:34 Uhr (5x Editiert) |
||
Inaktiv |
|||
SCHIRI Weltmeister Herkunft: Hamburg Beiträge: 5299 |
# Antwort: 9 - 05.06.2011 um 03:11 Uhr
warum benutzt du für sowas kein jquery?
evtl musst du an die stop() methode noch ein zweites true als parameter übergeben, oder das true, was ich da jetzt reingeschrieben habe, raus nehmen. Damit steuerst du, wie sich die Event-Queue verhalten soll, wenn die eine Animation gestartet wird, während die andere noch nicht fertig ist. (wenn man mit der maus ganz schnell übern button geht) ------------------ www.laszlokorte.de Zuletzt editiert von SCHIRI am 05.06.2011 um 03:11 Uhr (2x Editiert) |
||
Inaktiv |
|||
reVerB Thread-Ersteller Geekboy Beiträge: 1237 |
# Antwort: 10 - 05.06.2011 um 10:10 Uhr
warum benutzt du für sowas kein jquery? Weil es bei JQuery schon drin ist Ich möchte sowas aber mal selber schreiben, da ich mich gerade mit den einzelnen Event-Modellen in JS auseinandersetze. Und da ist ja genau das Problem ... Werden die Funktionen, wenn ein Event geworfen wird nicht bis zum Ende durchgeführt? Warum geht es nicht? ^^ Den Effekt habe ich jetzt in CSS getestet, da ich dann schon mal weiß, wie es geht. Transitions und Transform ist an mir vorbei gegangen. Aber wegen der Kompatibilität werde ich es doch in JS machen. Zuletzt editiert von reVerB am 05.06.2011 um 10:11 Uhr (1x Editiert) |
||
Inaktiv |
|||
SCHIRI Weltmeister Herkunft: Hamburg Beiträge: 5299 |
# Antwort: 11 - 05.06.2011 um 20:06 Uhr
Dein Fehler liegt bestimmt darin, dass du an setTimeout() strings als Callback übergibst. Sollte man generell nicht machen, weils in Richtung Eval gibt. Dadurch machst du glaub ich den Scope kaput. Habs dir etwas umgebaut und noch einen Tick erweitert. http://dev.laszlokorte.de/javascript_animation/ ------------------ www.laszlokorte.de Zuletzt editiert von SCHIRI am 05.06.2011 um 20:12 Uhr (1x Editiert) |
||
Inaktiv |
|||
reVerB Thread-Ersteller Geekboy Beiträge: 1237 |
# Antwort: 12 - 05.06.2011 um 20:31 Uhr
Vielen dank. Fast perfekt. Wenn man aber nun mehrere von den Buttons einsetzt, teilen sich beide die Steps, was zur Folge hat, das der aktuelle Step vom 2. Button geerbt wird und somit ohne Animation sofot groß springt. Aber da schaue ich nochmal. ^^ |
||
Inaktiv |
|||
SCHIRI Weltmeister Herkunft: Hamburg Beiträge: 5299 |
# Antwort: 13 - 05.06.2011 um 20:53 Uhr
ja du musst dann einen hash erstellen, in den du pro button den step speicherst, sollt klar sein. Ich hab nur auf die schnelle nichts gutes gefunden, wie man für dom-elemente ids erzeugt, die man als key für den hash benutzen kann. ------------------ www.laszlokorte.de |
||
Inaktiv |
|||
reVerB Thread-Ersteller Geekboy Beiträge: 1237 |
# Antwort: 14 - 05.06.2011 um 21:17 Uhr
Ich hab es jetzt über das Name-Attribut gelöst. Über den Linkhash wollte ich das ungern jetzt machen, da die URLS ja dann auch mit dem Anker angesprochen werden. Jetzt muss ich nur noch eine Möglichkeit finden, wie sich die Button bei der Animation nicht mehr gegenseitig stören. Wenn ich mitd er Maus über einen anderen Button fahre, unterbricht die Animation des anderen. |
||
Inaktiv |
|||
SCHIRI Weltmeister Herkunft: Hamburg Beiträge: 5299 |
# Antwort: 15 - 05.06.2011 um 21:20 Uhr
ach dann musst du current_animation auch noch in ein hash packen ------------------ www.laszlokorte.de |
||
Inaktiv |
|||
reVerB Thread-Ersteller Geekboy Beiträge: 1237 |
# Antwort: 16 - 05.06.2011 um 21:47 Uhr
Der folgende Code erfüllt genau das, was ich wollte. GEIL Mal wieder vielen Dank SHIRI
Zuletzt editiert von reVerB am 05.06.2011 um 21:48 Uhr (1x Editiert) |
||
Inaktiv |
|||
SCHIRI Weltmeister Herkunft: Hamburg Beiträge: 5299 |
# Antwort: 17 - 05.06.2011 um 22:15 Uhr
Du solltest anstelle von new Array() lieber new Object(), oder kürzer {} benutzen, weil du keine numerischen Indizes benutzt. ------------------ www.laszlokorte.de |
||
Inaktiv |
|||
reVerB Thread-Ersteller Geekboy Beiträge: 1237 |
# Antwort: 18 - 06.06.2011 um 00:34 Uhr
Naja. Das ist aber alles Feintuning. Danke für den Tip. Erst einmal gehts ^^ NACHTRAG: Ich habe bisher die Finger von JQuery gelassen und ich wollte es nicht ausprobieren. Aber wenn ich schon mit dem folgenden Code genau das habe, was ich will, sollte ich mich vielleicht an JQ orientieren. Nach einer halben Stunde einarbeitung und der W3Schools-Referenz habe ich da jetzt folgendes:
Und es funktioniert sogar mit asymetrischen Schaltflächen. Hammer ! Zuletzt editiert von reVerB am 06.06.2011 um 04:15 Uhr (3x Editiert) |
||
Inaktiv |
|||
Antworten: 18
Seite [1] |
Sie müssen sich registrieren, um zu antworten. |