:: ClanSphere :: Free OpenSource Clan CMS :: - Forum - [JS] Rekursion für Hovereffekt geht nicht

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:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

1. / 2. / ...

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:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.

1. / 2. / ...

<html>
<head>
<title>Button Test</title>
<style type="text/css">

</style>
</head>
<body>
<a class="appbtn" href="#" title="hallo">Videos</a>
<a class="appbtn" href="#" title="hallo">Musik</a>
<a class="appbtn" href="#" title="hallo">Witze</a>
<a class="appbtn" href="#" title="hallo">Bilder</a>
</body>
</html>

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:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.

1. / 2. / ...

.manage {
background-color : #eeeeee;
border : 1px solid #BFBFBF;
color : #7e7b7b;
font-family : Verdana, Helvetica, sans-serif;
font-size : 8pt;
margin : 1px;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.manage:hover {
background-color : #ffffff;
background-image : url('images/border.gif');
background-position : bottom;
background-repeat : repeat-x;
color : #7e7b7b;
font-family : Verdana, Helvetica, sans-serif;
font-size : 8pt;
margin : 1px;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
-ms-transform: scale(1.1);
box-shadow: 5px 5px 5px #000;
}
.manage:focus {
background-color : #ffffff;
background-image : url('images/border.gif');
background-position : bottom;
background-repeat : repeat-x;
color : #7e7b7b;
font-family : Verdana, Helvetica, sans-serif;
font-size : 8pt;
margin : 1px;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
-ms-transform: scale(1.1);
box-shadow: 5px 5px 5px #000;
}

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?

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

1. / 2. / ...

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

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.

1. / 2. / ...

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Javascript Animation by Laszlo Korte</title>

        <style type="text/css" media="screen">
            .appbtn {
                display: block;
                width: 50px;
                height: 50px;
                background: rgba(100,100,100,1);
                color: rgba(255,255,255,1);

                text-align: center;
                padding: 1em;
            }
        </style>
    </head>

    <body>
        <div class="wrapper">
            <a href="#" class="appbtn">Clansphere<br/>Rocks!</a>
            <a href="#" class="appbtn">Clansphere<br/>Rocks!</a>
        </div>

        <script>
                var minsize = 50;
                var maxsize = 200;
                var duration = 1000;

                var fps = (maxsize-minsize)*1000/duration;

                var steps = (maxsize-minsize)*(fps/1000);
                var sleepTime = duration/steps;
                var step = new Array();
                var current_animation = new Array();;

                var animations = {
                    linear: function(x) {
                        return x;
                    },

                    square: function(x) {
                        return Math.pow(x, 2);
                    },

                    tan: function(x) {
                        return Math.tan(x);
                    },

                    sin: function(x) {
                        return Math.sin(2*x);
                    },

                    complex: function(x) {
                        return 1.2615*Math.pow(Math.sin(2*x), 2);
                    }

                };

                var ease = 'complex';
                var time = animations[ease] ? animations[ease] : animations['linear'];

                function setLinkEvents() {
                    for(var i = 0; i < document.links.length; i++) {
                        if(document.links[i].className == 'appbtn') {
                            if (document.links[i].addEventListener) {
                                document.links[i].addEventListener("mouseover", hoverEffectOver, false);
                                document.links[i].addEventListener("mouseout", hoverEffectOut, false);
                                document.links[i].name = "test" + i;
                                step[document.links[i].name] = 0;
                            } else if (this.attachEvent) {
                                document.links[i].attachEvent('on' + "mouseover", hoverEffectOut);
                                document.links[i].attachEvent('on' + "mouseout", hoverEffectOut);
                                document.links[i].name = "test" + i;
                                step[document.links[i].name] = 0;
                            }
                        }
                    }
                }

                function hoverEffectOver(event) {
                    if(step[this.name]>=steps) {
                        return;
                    }
                    step[this.name]++;

                    var element = this;

                    var currsize = element.style.height;

                    currsize = minsize + (maxsize-minsize) * time(step[this.name]/steps);

                    element.style.height = currsize + 'px';
                    element.style.width = currsize + 'px';

                    window.clearTimeout(current_animation[this.name]);
                    current_animation[this.name] = window.setTimeout(function() { hoverEffectOver.call(element, event) }, sleepTime);
                }

                function hoverEffectOut(event) {
                    if(step[this.name]<=0) {
                        return;
                    }
                    step[this.name]--;

                    var element = this;
                    var currsize = element.style.height;

                    currsize = minsize + (maxsize-minsize) * time(step[this.name]/steps);

                    element.style.height = currsize + 'px';
                    element.style.width = currsize + 'px';

                    window.clearTimeout(current_animation[this.name]);
                    current_animation[this.name] = window.setTimeout(function() { hoverEffectOut.call(element, event) }, sleepTime);
                }

                window.onload = setLinkEvents;
        </script>
    </body>
</html>

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:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

1. / 2. / ...

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
a {
  width: 150px;
  height: 20px;
  background-color: green;
  display: block;
  opacity: 0.5;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
  $("a").mouseenter(function(){
    $(this).stop().animate({width:"250px",height:"40px",opacity:"1"},500,"linear");
  });
  $("a").mouseout(function(){
    $(this).stop().animate({width:"150px",height:"20px",opacity:"0.5"},500,"linear");
  });
});
</script>
</head>
<body>
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
</body>
</html>

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.

Forum - Thema
Nächstes Thema ->
Forum -> Support -> (X)HTML, CSS, JavaScript -> [JS] Rekursion für Hovereffekt geht nicht