[JavaScript] Spowolnienie efektu Opacity

[gorylek]

Witam,
ostatnimi czasy bawię się troszkę przy JavaScript i wpadł mi do głowy durny pomysł. Otóż wykorzystałem AJAX'a do ładowania tekstów do kontenera ale czułem pewien niedosyt i postanowiłem zrobić do tego mały efekt w którym kontener zaniknie, zostanie wczytany nowy tekst by następnie kontener się pojawił.

Co do wczytania tekstu to wszystko chodzi jak złoto ale mam problem ze znikaniem i pojawianiem się tekstu. Napisałem takie oto proste funkcje:

Kod: Zaznacz cały

function ukryjTresc()
{
    for(i=10; i>=0; i--)
    {
        opacity(i);
    }
}

function pokazTresc()
{
    for(i=0; i<11; i++)
    {
        opacity(i);
    }
}

function opacity(i)
{
    $('tresc').style.opacity = i/10;
    $('tresc').style.filter="Alpha(Opacity=" + i + "0)";
}

Zaznaczam że $('tresc') to nic innego jak:

Kod: Zaznacz cały

function $(id)
{
    return document.getElementById(id);
}

Lubie sobie skracać pisania od czasu do czasu.

W każdym razie tekst zanika i pojawia się ale stanowczo zbyt szybko. Można jakoś opóźnić wywoływanie skryptu tak by kolejne przejścia pętli następowały stopniowo ? Kombinowałem z setTimeout ale coś mi nie wychodzi.

Propozycje ? Chodzi mi o to żeby zanikanie/pojawianie trwało jakieś 2 sekundy. Później zobaczę na ile ustawić ten czas żeby elegancko to wyglądało a nie wkurzało internauty.

EDIT//
Jeszcze drobna sprawa, długość okna zmienia mi się natychmiastowo. Zastanawiam się jak zrobić efekt w którym rozszerzy się ono stopniowo a nie przeskoczy. Widziałem takie efekty w bibliotekach niektórych ale wygrzebać odpowiednią funkcje z czegoś co waży kilkaset kilo chwile trwa a ciekaw jestem jak to jest rozwiązane jeżeli nie zna się wysokości elementu pierwotnego i następnego.
Zastanawiałem się nad użyciem 2 kontenerów, jeden z załadowanym tekstem a drugi okalający z overflow: hidden. Pobrał bym wysokość kontynera wewnętrznego i dopasował stopniowo zewnętrzny (gdzie też mi potrzebny sposób na opóźnienie animacji jak w przykładzie wyżej pytałem). Przy przeładowaniu operacje by się powtórzyło na tej samej zasadzie.
Jakieś propozycje i w tym temacie ? Jeszcze nie testowałem ale sugestie zanim zaczne pisać mile widziane.

A teraz wracam do pisania skryptów administrujących użytkownikami.
Pozdrawiam i z góry dziękuje za pomoc.
~Gorylek

[!ans]

Co do powiększania się kontenera do razem ze zmianą opacity możesz zmieniać też wielkość. A jak próbowałeś z setTimeout to co było nie tak??

[gorylek]

EDIT//
Próbowałem w ten sposób ale coś mi nie działa. Nie znam za dobrze JS choć fakt faktem składnia ta sama co przy C++/PHP. Jednak coś mi tu dziczy:

Kod: Zaznacz cały

function wczytaj(param)
{
    var ajax = startAJAX();
    ukryjTresc();
    ajax.onreadystatechange=function()
    {
        if(ajax.readyState==4)
        {
            $('tresc').innerHTML = ajax.responseText;
            pokazTresc();
        }
    }
    ajax.open("GET",param,true);
    ajax.send(null);
}

ukryjTresc()
{
    var i=10;
    for(i=10;i>0;i--)
    {
        setTimeout("opacity("+i+")",100);
    }
}

pokazTresc()
{
    var i=0;
    for(i=0;i<10;i++)
    {
        setTimeout("opacity("+i+")",100);
    }
}


function opacity(i)
{
    $('tresc').style.opacity = i/10;
    $('tresc').style.filter="Alpha(Opacity=" + i + "0)";
}

setTimeout próbowałem bez "", z "" ze zmienną normalnie podaną w charakterze tekstu itp itd. próbowałem nawet coś innego uruchomić jak setTimeout("alert('tekst');", 2000); żeby zobaczyć czy to ustrojstwo w ogóle działa mi (działa). Sam nie wiem, jak znam życie, gdzieś robie drobny błąd albo mam błędną koncepcje myślową.

Help ?

EDIT//

Spróbuje to jeszcze zrobić rekurencyjnie, może ta pętla coś wadzi. Dam znać jak poszło.

[!ans]

pokombinuj coś z funkcją setInterval. Działa ona w ten sposób że uruchamia daną w atrybucie funkcje czy kod co czas określony w drugim atrybucie. Czyli Możesz zrobić tak:
1. Pobrać wysokość i podzielić na 1000. I co 2 milisekundy uruchamiać funkcje powiększającą wysokość o tą część i co któreś przejście też opacity. Wszystko trwało by w tym wypadku 2s i płynnie szło, ale nie wiem jak to będzie w praktyce.

[gorylek]

Zrobiłem to rekurencyjnie i z setTimeout. Chodzi dobrze. Zrezygnowałem też z zanikania. Po prostu na starcie opacity ustawiam na 0 a następnie przechodze do 10 po przygotowaniu odpowiedzi przez serwer i wpisaniu jej w blok "tresc".

Wygląda całkiem dobrze, ustawiłem czas na 0,5 sekundy bo opera coś przymula efekt. Zastanawiam się jak to jest rozwiązane w bibliotekach ajaxowych, widziałem parę fajnych efektów które dobrze wyglądają i szybko chodzą ale dogrzebać się tam do odpowiedniej funkcji graniczy z cudem nawet jak wiesz czego szukasz.

Dla zainteresowanych, kod wygląda tak:

Kod: Zaznacz cały

function startAJAX()
{
  var request = false;

  try
  {
      request = new XMLHttpRequest();
  }
  catch(err1)
  {
      try
      {
          request = new ActiveXObject('Msxml2.XMLHTTP');
      }
      catch(err2)
      {
          try
          {
              request = new ActiveXObject('Microsoft.XMLHTTP');
          }
          catch(err3)
          {
              request = false;
          }
      }
  }
  return request;
}

function $(id)
{
    return document.getElementById(id);
}

function $n(id)
{
    return document.getElementsByName(id);
}

function $tn(id)
{
    return document.getElementsByTagName(id);
}

function wczytaj(param)
{
    opacity(0);
    var ajax = startAJAX();
    ajax.onreadystatechange=function()
    {
        if(ajax.readyState==4)
        {
            $('tresc').innerHTML = ajax.responseText;
            pokazTresc(0);
        }
    }
    ajax.open("GET",param,true);
    ajax.send(null);
}

function pokazTresc(i)
{
    if(i<=10)
    {
        opacity(i);
        i++;
        setTimeout("pokazTresc("+i+")",50);
    }
    else
    {
        opacity(10);
    }
}

function opacity(i)
{
    $('tresc').style.opacity = i/10;
    $('tresc').style.filter="Alpha(Opacity=" + i + "0)";
}

Teraz tylko dodać skrypt płynnej zmiany wielkości okna i będę w domu :-]