Demo

Probiere ClanSphere aus und teste daran herum. Demo


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. / ... 
 var minsize 48;
var 
maxsize 64;
var 
currsize minsize;
var 
sleepTime 50;

function 
setLinkEvents() {
    for(var 
0document.links.lengthi++) {
        if(
document.links[i].className == 'appbtn') {
            if (
document.links[i].addEventListener) {
                
document.links[i].addEventListener("mouseover"hoverEffectOverfalse);
                
document.links[i].addEventListener("mouseout"hoverEffectOutfalse);
            } else if (
this.attachEvent) {
                
document.links[i].attachEvent('on' "mouseover", function () { return hoverEffectOver.call(document.links[i], window.event); });
                
document.links[i].attachEvent('on' "mouseout", function () { return hoverEffectOut.call(document.links[i], window.event); });
            }
        }
    }
}

function 
hoverEffectOver(btn) {
        if(
this.id != undefined) {
            
btn this.id;
        }
        
document.getElementById(btn).style.height currsize 'px';
        
document.getElementById(btn).style.width currsize 'px';
        
currsize++;
        
window.setTimeout("function() { hoverEffectOver(btn) };",sleepTime);
}

function 
hoverEffectOut(btn) {
        if(
this.id != undefined) {
            
btn this.id;
        }
        
document.getElementById(btn).style.height currsize 'px';
        
document.getElementById(btn).style.width currsize 'px';
        
currsize--;
        
window.setTimeout("function() { hoverEffectOut(btn) };",sleepTime);
}

window.onload setLinkEvents;


Zuletzt editiert von reVerB am 04.06.2011 um 17:31 Uhr (2x Editiert)
Inaktiv
sgraewe ClanSphere Team

Supporter
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 ClanSphere Team

Supporter
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 ClanSphere Team


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">
<!--
body {
    
background-color#000000;
}

.
appbtn {
    
width48px;
    
height48px;
    
floatleft;
    
margin3px;
    
background-imageurl(bgmain.png);
    
border-radius:5px;
    
box-shadow0px 0px 5px rgba(255,255,255,1);
    
text-shadow1px 1px 1px #000000;
    
text-aligncenter;
    
font-weightbold;
    
color#FFFFFF;
    
font-size7pt;
    
font-familyverdana;
    
text-decorationnone;
    
transitiontransform 1s linear;
    -
webkit-transitiontransform 1s linear;
    -
moz-transitiontransform 1s linear;
    -
o-transitiontransform 1s linear;
}

.
appbtn:hover {
    
background-imageurl(secmain.png);
    
transformscale(1.333);
    -
webkit-transformscale(1.333);
    -
moz-transformscale(1.333);
    -
o-transformscale(1.333);
    
floatleft;
}
-->
</
style>
</
head>
<
body>
<
class="appbtn" href="#" title="hallo">Videos</a>
<
class="appbtn" href="#" title="hallo">Musik</a>
<
class="appbtn" href="#" title="hallo">Witze</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 ClanSphere Team


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 VerdanaHelveticasans-serif;
font-size 8pt;
margin 1px;
-
moz-transitionall 0.5s ease;
-
webkit-transitionall 0.5s ease;
-
o-transitionall 0.5s ease;
transitionall 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 VerdanaHelveticasans-serif;
font-size 8pt;
margin 1px;
-
webkit-transformscale(1.1);
-
moz-transformscale(1.1);
transformscale(1.1);
-
ms-transformscale(1.1);
box-shadow5px 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 VerdanaHelveticasans-serif;
font-size 8pt;
margin 1px;
-
webkit-transformscale(1.1);
-
moz-transformscale(1.1);
transformscale(1.1);
-
ms-transformscale(1.1);
box-shadow5px 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 ClanSphere Team


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. / ... 
 var duration 2000,
max 64,
min 48;

$(
window)
.
delegate('a.appbtn''mouseover', function(event) {
  var 
$this = $(this);
  
  
$this.stop(true).animate({
    
'width'max,
    
'height'max
  
}, duration);
})
.
delegate('a.appbtn''mouseover', function(event) {
  var 
$this = $(this);
  
  
$this.stop(true).animate({
    
'width'min,
    
'height'min
  
}, duration);
})


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 ClanSphere Team 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 ClanSphere Team


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 ClanSphere Team 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 ClanSphere Team


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 ClanSphere Team


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 {
                
displayblock;
                
width50px;
                
height50px;
                
backgroundrgba(100,100,100,1);
                
colorrgba(255,255,255,1);
 
                
text-aligncenter;
                
padding1em;
            }
        </
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(x2);
                    },
 
                    
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 
0document.links.lengthi++) {
                        if(
document.links[i].className == 'appbtn') {
                            if (
document.links[i].addEventListener) {
                                
document.links[i].addEventListener("mouseover"hoverEffectOverfalse);
                                
document.links[i].addEventListener("mouseout"hoverEffectOutfalse);
                                
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(elementevent) }, 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(elementevent) }, sleepTime);
                }
 
 
                
window.onload setLinkEvents;
        </
script
    </
body
</
html>



Zuletzt editiert von reVerB am 05.06.2011 um 21:48 Uhr (1x Editiert)
Inaktiv
|
SCHIRI ClanSphere Team


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">
{
  
width150px;
  
height20px;
  
background-colorgreen;
  
displayblock;
  
opacity0.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.