[HTML][JavaScript] Płynne przejście Opcje

[Woytek950]

Założyłem nowy temat ponieważ poprzedni nie mial nic wspólnego z aktualnym.
Jest jakiś prosty sposób aby funkcja byla wykonywana płynnie ? np. z takim opóźnieniem, tylko nie timeout(wykona ale z opóźnieniem czasowym, np. po 2 sekundach się coś pojawi), ale takim specyficznym. W moim przypadku jest to zmiana z-index czyli tak jakby zmiana z display:none na display:block;

znalazłem linki z tym związane ale nie wiem jak się obslużyc biblioteką jquery.
http://api.jquery.com/css/
http://jqueryui.com/demos/show/

PS. płynne przejście chcialbym wykorzystać dla linijek z funkcji:
imgToChange.style.zIndex ='4';
box.style.background='url(img/backRedLine.png)';

Ten post edytował Woytek950 3.12.2011, 20:27:34

[croc]

Musisz sobie odpowiedzieć na pytanie jakich właściwości potrzebujesz, by osiągnąć pożądany efekt. Masz na myśli efekt fade in?

[Woytek950]

Nie wiem, ale chciał bym wiedzieć jak napisać linijke w jquery żeby z index zmienił się płynnie.

[amii]

Poczytaj o tych metodach:
http://api.jquery.com/animate/
http://api.jquery.com/fadeIn/
http://api.jquery.com/fadeTo/

[croc]

A jak niby z-index ma się zmienić płynnie? Nie ma czegoś takiego jak bycie "trochę na wierzchu". Dlatego zapytałem o efekt, który chcesz osiągnąć.

[Woytek950]

masz rację. próbowałem zrobić to z z-index ale wyszło tak jak mówisz. dlatego też spróbowałem ustawić na width: 0%. i height na 0% i nawet fajnie to wyglądało ale wszystko się "kopało" i wariowało. jestem poczatkującym w js dlatego też moje pytania są takie noobskie.

może to Wam w czymś pomoże, poinstruuje bo sam nie wiem co tu trzeba by zmienić. wszystkie linijki opisałem żeby nie było problemu.
index.html

[HTML] pobierz, plaintext 
    <div id="sliderWrapper">
      <div id="boxFirst" onmouseover="changeStyleOnHover(this.id);">
      </div>
      <img src="cms/img/gallery/imgFirst.jpg" class="sliderImages" id="imgFirst" alt="" />
      <div id="boxSecond" onmouseover="changeStyleOnHover(this.id);">
      </div>
      <img src="cms/img/gallery/imgSecond.jpg" class="sliderImages" id="imgSecond" alt="" />
      <div id="boxThird" onmouseover="changeStyleOnHover(this.id);">
      </div>
      <img src="cms/img/gallery/imgThird.jpg" class="sliderImages" id="imgThird" alt="" /> </div>
[HTML] pobierz, plaintext 

slider.js

[JAVASCRIPT] pobierz, plaintext 
function changeStyleOnHover(nameId)
{
  var boxes = new Array("boxFirst", "boxSecond", "boxThird"); // tablice z divami-boxami
  var images= new Array("imgFirst", "imgSecond", "imgThird"); // tablica z nazwami img, obrazkami w folderze  
 
  for(var i=0; i<boxes.length; ++i) // zerowanie ustawien wygladu dla wszystkich elemetow
  {
      var box = document.getElementById(boxes[i]);
 	  box.style.zIndex='2'; // indeks 2 dla wszystkich boxow
      box.style.background='none'; // wyzerowanie tla
      box.style.background='url(cms/img/backRedLineOut.png)'; // ustawienie tla przed najechaniem
 
	  var image = document.getElementById(images[i]);
   	  image.style.zIndex='3'; // zerowanie indeksu dla obrazkow
	  image.style.width='100%'; // jquery zerowanie szer wys
	  image.style.height='100%'; // jquery zerowanie szer wys
  }
 
  var box = document.getElementById(nameId); // przypisanie
  box.style.zIndex='5'; // indeks po najechaniu
  box.style.background='none'; // wyzerowanie tla
  box.style.background='url(cms/img/backRedLine.png)'; // tlo po najechaiu 
 
  var boxForImg = document.getElementById(nameId); // przypisanie 
  boxForImg = boxForImg.id; // znajdywanie id boxa, przypisanie jako string
  var cutNEditName = "img"+boxForImg.substring(3); // usunieciu "box" ze stringu i wstawienie "img"
 
  var imgToChange = document.getElementById(cutNEditName); // przypisanie zmiennej dla obrazka
 
  imgToChange.style.zIndex ='4'; // ustawianie z index na 4 dla obrazka
 
}
[JAVASCRIPT] pobierz, plaintext 

a wygląda to mniej więcej tak: