Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: stopniowe pojawianie sie obrazka
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
collecter
7.07.2011, 11:50:19
Witam,
jestem poczatkujacy w javie script i nie potrafie sobie poradzic z pewnym problemem. Chcialbym zeby po zaladowaniu sie strony obrazek ktorego poczatkowa opacity jest rowna zero zaczal stopniowo sie pojawiac (zmieniac 0.1 opacity co sekunde az do osiagniecia wartosci 1). Napisalem w tym celu kod ktory zamieszcam ponizej:


Kod
$(document).ready(function() {


      var image = document.getElementById('coin');

      var currentOpacity = 0;
      image.style.opacity = currentOpacity;

      changeOpacity();


      function changeOpacity() {

        while(image.style.opacity != 1) {

          image.style.opacity = currentOpacity;
          currentOpacity = currentOpacity + 0.1;

          wait();
        }
      }


      function wait() {
        setTimeout(changeOpacity(), 1000);
      }



    });


Niestety kod nie dziala tak jakbym chcial i od razu po jego uruchomieniu obrazek jest widoczny (opacity jest rowna 1). Brakuje tego stopniowego zminieania co jedna sekunde.

Z gory dziekuje za wszelka pomoc.
nospor
7.07.2011, 12:04:22
wywal tę pętlę z funkcji.

poza tym nie:
setTimeout(changeOpacity(), 1000);
a:
setTimeout("changeOpacity();", 1000);

Czytaj w manualu jak się uzywa funkcji, których chcesz użyć
bmL
7.07.2011, 12:38:34
Nie wywalić while tylko wstawić zamiast niego if smile.gif
nospor
7.07.2011, 12:50:08
W moim rozumieniu było: wywalić while. Potem odpalić kod i zobaczyć że działa. po chwili się zorientować że idzie dalej niż 1 i dopiero potem dodać IF. No ale jak kto woli smile.gif
collecter
7.07.2011, 13:12:58
Dziekuje bardzo za Wasza pomoc. W dalszym ciagu jednak mam ten sam problem. Wywalilem najpierw while i dalej pojawia mi sie od razu obrazek z opacity = 1, zamiast stopniowej zmiany. Zmodyfikowalem teraz kod do ponizszej postaci:

Kod
    function changeOpacity(img) {

      currentOpacity = img.style.opacity;

      while (img.style.opacity < 1) {

//        alert('current opacity is -' + img.style.opacity);

        currentOpacity = parseFloat(currentOpacity) + 0.1;

        img.style.opacity = currentOpacity;

//        alert('we set opacity to - ' + img.style.opacity);

        wait();

      }
      

      alert('WE STOP ! - current opacity is - ' + currentOpacity);

    }


    function wait() {
      setTimeout("doNothing();", 3000);
    }

    function doNothing(){

    }


    function clearOpacity(img) {
      img.style.opacity = 0;
    }


    $(document).ready(function() {

      var image = document.getElementById('coin');

      clearOpacity(image);
      changeOpacity((image));

    });


W kodzie znajduja sie zakomentowane alerty. Kiedy egzekuje kod z alertami, dziala poprawnie tzn pojawia sie alert i potem nastepuje zmiana opacity obrazka az do przekroczenia wartosci jeden. Jesli jednak alerty zakomentuje tak jak jest to pokazane powyzej obrazek pojawia sie od razu z opacity = 1.

nospor
7.07.2011, 13:14:49
Czemu zmieniłeś kod? Czemu dodałeś nowe funkcje?
Napisałem/napisaliśmy ci dwie proste rzeczy do poprawy:
1) WHILE NA IF
2) I moja poprawka odnośnie setTimeout()
I nic więcej. Ty zamiast to zrobić to stworzyłeś jakiegoś potworka.... tongue.gif
collecter
7.07.2011, 13:40:06
Sprobowalem tego ale nie dziala. W tym przypadku obrazek tak jak poprzednio pojawia sie od razu z opacity = 1. Kod po tych modyfikacjach wyglada nastepujaco:

Kod
   $(document).ready(function() {


      var image = document.getElementById('coin');

      var currentOpacity = 0;
      image.style.opacity = currentOpacity;

      changeOpacity();


      function changeOpacity() {

        if (image.style.opacity < 1) {

         //alert('Current opacity is - '+image.style.opacity);

          image.style.opacity = currentOpacity;
          currentOpacity = parseFloat(currentOpacity) + 0.1;

        //alert('and we changed for current opacity - ' + image.style.opacity);

          wait();
        }
      }


      function wait() {
        setTimeout(changeOpacity(), 1000);
      }


    });


Od siebie dodalem tylko parseFloat w currentOpacity poniewaz zauwazylem (po zrobieniu kilku alertow) ze nowa wartosc jest traktowana jako string. tzn jesli dodawalem 0.1 bez parseFloat do currentOpacity powstawaly cuda typu 0.10101; jednak nawet wtedy obrazek po egzekucji kodu pojawia sie z opacity = 1.

Znowu takze zauwazylem ta sama rzecz jak w poprzednim przykladzie, ze jesli zamieszcze alert(ktore sa tutaj zakomentowane) kod wykonuje sie poprawnie i po kazdym kliknieciu ok w alert opacity rosnie o 0.1;


Co do setTimeOut to kiedy zmieniam na

Kod
  function wait() {
        setTimeout("changeOpacity();", 1000);
      }


To kod nawet z alertami wykonuje sie tylko raz - obrazek pozostaje na opacity = 0.1, czyli setTimeout nie wykonuje sie poprawnie (nie wykonuje sie wogole). Dopiero jak usune cudzyslowia i srednik wykonuje sie wielokrotnie (z niekomentowanymi alertami, jesli sa zakomentowane obrazek od razu pojawia sie z opacity = 1, bez stopniowej zmiany).


Mam nadzieje ze nie zagmatwalem tego za bardzo wink.gif
nospor
7.07.2011, 19:27:41
setTimeout("changeOpacity();", 1000);
Tak ma być. Jak coś nie działa to nie jest wina tego, tylko czego innego.
No dobra, niepotrzebny jest tam średnik. Czyli tak ma być:
setTimeout("changeOpacity()", 1000);

Dodaj jeden alert przed IF, włącz te alerty w IF i powiedz co to wszystko ci teraz zwraca
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.