opacity i js

2011-09-14 21:20:28 Post #1 korey

 
witam. zrobiem skrypt ktory za pomoca ajax i php wyswietla artykuly pl kliknieciu na element z listy. wszstko dziala jak trzeba ale postanowilem dodac efekt przejscia za pomoca przenikania. tzn opcity. no i to tez mi dziala, ale tylko jedno razowo. tj. po pierwszym kliknieciu. po nastepnych klikach nic sie nie dzieje i na tym polega moj problem. o to kod:
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
<html>
<head>
<!--<script type="text/javascript" src="ajax.js"></script>-->
<script type="text/javascript">
var xmlhttp;
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
     try {
      xmlhttp = new XMLHttpRequest();
     } catch (e) {
      xmlhttp=false;
     }
    }

function zmienTresc(val, nr){
    xmlhttp.open('get', 'data.php?id='+val);
    xmlhttp.onreadystatechange = odbierzDane2;
    xmlhttp.send(null);    

    doc = document.getElementById('menu2');
    var x= doc.children.length;
    
    for(i=0; i<x; i++){
        if(doc.children[i].className==nr){
         // doc.children[i].style.border='solid 1px red';
        }else{
          doc.children[i].style.border='';
        }
    }
//     document.getElementById(nr).style.border='solid 1px green';
    fade('target');
}

function odbierzDane2() {
  if(xmlhttp.readyState == 4){
        if (xmlhttp.status == 200){
             document.getElementById('target').innerHTML = xmlhttp.responseText;

        }
//    location.reload(true);    
    }
}    
    
    var start = 0;
    var end = 9;
    var stat = false;
    var koniecSkryptu = false;
    
function fade(divek){
    var el = document.getElementById(divek);
    
    if(stat == false){
        setTimeout("fade('" + divek + "')", 80);
            if(start < end){ start++; }else{ stat = true; var koniecSkryptu = true; }
    
        el.style.opacity="0."+start;
    }else{
        el.style.border="solid 1px green";
    }
}
</script>
</head>
<body onload="podmiana('pod')">
<div id="pod"></div>

<div id="all">
<ul id="menu2">
<li style="display: inline; background: blue;" class="1" id="1" onclick="zmienTresc('ogloszenia', 1);">ogloszenia</li>
<li style="display: inline; " class="2" id="2" onclick="zmienTresc('aktualizacje', 2);">aktualizacje</li>
<li style="display: inline; " class="3" id="3" onclick="zmienTresc('newsy', 3);">newsy</li>
</ul>
<div id="target"></div>
</div>
</body>
</html>

2011-09-14 21:31:18 Post #2 nospor

 
No przecież po pierwszym obiegu start osiąga max, więc niby czemu przy drugim nagle ma ci działać? Wyzeruj najpierw wszystko przed rozpoczęciem drugiego i następnego klika.

2011-09-14 21:39:52 Post #3 korey

 
wiem. kombinowalem ale bez skutecznie. ;/ albo nic sie nie dzialo albo zawieszalo przegladarke.. przed funkcja dalem start = false, czemu to nie starcza? nawet deletowalem start i nic;(

2011-09-14 21:54:22 Post #4 nospor

 
Poprostu zresetuj te zmienne przed rozpoczęciem fade

1
2
3
4
5
6
7
8
9
....
  
    start = 0; 
    end = 9; 
    stat = false; 
    koniecSkryptu = false;
 fade('target');
.....

2011-09-14 22:03:10 Post #5 korey

 
loool robilem tak tez tylko dawalem var przed nazwami i nie dzialalo.. czemu tak dziala?

2011-09-14 22:07:19 Post #6 nospor

 
var określa deklaracje zmiennej. Jak robisz var w funkcji to ta zmienna jest widziana tylko w tej funkcji i ma się nijak do zasięgu globalnego.

2011-09-14 22:11:03 Post #7 korey

 
czli deklaruje sie jednorazowo a potem tylko nadaje sie wartosci jakie sa potrzebne? dobrze zrozumialem?

2011-09-14 22:17:22 Post #8 nospor

 
W tym wypadku akurat jednorazowo się deklaruje. A kiedyś może będziesz chciał deklarować w funkcji zmienne lokalne. Wszystko zależy jak leży więc wiedz, że VAR w funkcji deklaruje zmienną lokalną a nie globalną.

Jak nie użyjesz VAR to zmienna ma wówczas zasięg globalny, nawet jak wcześniej nie była deklarowana globalnie i używasz jej w funkcji.

Odpowiedz