Toon posts:

[Javascript] Werkt in Firefox, stottert in Internet Explorer

Pagina: 1
Acties:

donderdag 23 februari 2006 15:00

Acties:

Verwijderd

Topicstarter
Hallo iedereen,

Ik heb onderstaande code deel van het net afgehaald en zelf aangepast. Ik gebruik setInterval om functies gelijk te laten starten. In firefox werkt alles naar behoren, alleen in Internet Explorer stottert het geheel. Iemand een idee?.

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

<html>
<head>
<script language='javascript'>

var inter = [];

function setBrowserOpacity(value, id){
    
    var object = document.getElementById(id).style;
    
    object.opacity = (value / 98);
    object.MozOpacity = (value / 98);
    object.KhtmlOpacity = (value / 98);
    object.filter = "alpha(opacity=" + value + ")";
}

function changeOpacity(id,start,end,time, interval){
    clearInterval(inter[interval]);
    
    var speed = Math.round(time / 98);
    var timer = 0;
    
    if(start > end){
        for(i = start; i >= end; i--){
            setTimeout("setBrowserOpacity(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if (start < end) {
        for(i = start; i <= end; i++){
            setTimeout("setBrowserOpacity(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

function shift(id, time){
    if(document.getElementById(id).style.opacity == 0){
        changeOpacity(id, 0, 98, time);
    } else {
        changeOpacity(id, 98, 0, time);
    }
}

function changeWidth(id, start,end, time, interval) {
    clearInterval(inter[interval]);
    
    var speed = Math.round(time / 500);
    var timer = 0;
    
    for (i = start; i < end; i++) {
        setTimeout("setWidth(" + i + ", '" + id + "')",(timer * speed)); 
        timer++;
    }
}

function changeHeight(id, start, end, time, interval) {
    clearInterval(inter[interval]);
    
    var speed = Math.round(time / 500);
    var timer = 0;
    
    for (i = start; i < end; i++) {
        setTimeout("setHeight(" + i + ", '" + id + "')",(timer * speed)); 
        timer++;
    }
}

function setWidth(size, id) {

    var object = document.getElementById(id);
    object.style.width = size;
    
}

function setHeight(size, id) {

    var object = document.getElementById(id);
    object.style.height = size;
    
}


function init() {
    time = 3000;
    inter[0] = setInterval('changeOpacity(\'div1\', 10, 100, 5000, 0)',100);
    inter[1] = setInterval('changeWidth(\'div1\', 0, 800, ' + time + ', 1)',100);
    inter[2] = setInterval('changeHeight(\'div1\', 0, 500, ' + time + ', 2)',100);
    inter[3] = setInterval('changeOpacity(\'div2\', 10, 100, ' + time + ', 3)',100);
    inter[4] = setInterval('changeOpacity(\'div3\', 10, 100, ' + time + ', 4)',2000);
    inter[5] = setInterval('changeWidth(\'div2\', 0, 200, ' + time + ', 5)',100);
    inter[6] = setInterval('changeHeight(\'div2\', 0, 100, ' + time + ', 6)',100);
}

setTimeout('init()', 1000);

</script>

</head>

<body>

<div id="div1" style="background-color: green; width: 0px; height: 0px; -moz-opacity: 0; filter: alpha(opacity=0);"></div>
<div id="div2" style="background-color: red; width: 0px; height: 0px; -moz-opacity: 0; filter: alpha(opacity=0);"></div>
<div id="div3" style="width: 100px; height: 50px; position: relative; top: -100px; left: 25px; -moz-opacity: 0; filter: alpha(opacity=0);">
<p>Menu !!!</p></div>

</body>
</html>


voorbeeld op het net
http://www.oosterveer.com/test.htm

donderdag 23 februari 2006 15:07

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 08-04 16:23

André

Analytics dude

Bij mij stottert het in beide browser niet, ik vermoedt dat de animatie te snel gaat en dan je deze langzamer moet laten lopen.
Reageer