Witam piszę w JQuery rotato banerów i chciał bym wiedzieć jak można zrobić płynne przejście między jedną a drugą grafiką, może macie jakieś pomysły?

Rodzic: position: relative, każdy z bannerów: position: absolute; top: 0; left: 0.

Potem wszystkie ukrywasz prócz pierwszego, następnie pokazujesz N+1, a bieżący chowasz.

A w jquery jest jakaś funkcja która zatrzyma skrypt na dany okres czasu, czy trzeba używać js'owej?

Po co mieliby w jQuery tworzyć osobną, skoro masz magiczną funkcję setInterval, a jak chyba wiesz, w jQ i ogólnie w JS wszystko jest obiektem/funkcją. ;]

Jeśli jest setInterval, to jest i clearInterval. AFAIK tylko Prototype ma PeriodicalExecutor.

Mam jeszcze jedno pytanie, za pomocą $('#baner').find('a.b0').css('top') pobieram rozmiar i wygląda on tak - "60px" jak usunąć z dopisek "px"?

parseInt ;]

Wielkie dzięki. ;}

W jaki sposób można sprawdzić wymiary obrazka, próbowałem css('width') i attr('width') ale wynik zawsze jest równy null, ma ktoś jakiś pomysł?

Nie via css, a attr.

Przeczytaj uważnie jeszcze raz mojego posta.

Mam taki kod:

[HTML] pobierz, plaintext 
alert($(idBaneru).find('a.b1').find('img').height())
 
       <div id="baner">
         <a href="http://www.onet.pl" name=odnosnik>
            <img width="1000px" alt="Baner" src="banertop.jpg">
         </a>
         <a href="http://www.o2.pl" name=odnosnik>
            <img width="1000px" alt="Baner" src="banertop2.jpg">
         </a>
         <a href="http://www.o2.pl" name=odnosnik>
            <img width="1000px" alt="Baner" src="banertop3.jpg">
         </a>
      </div>
[HTML] pobierz, plaintext 

Attr('height') daje w tym przypadku to samo co powywszy kod czyli NULL, jak zamieniam na:

[HTML] pobierz, plaintext 
alert($(idBaneru).find('img').height())
[HTML] pobierz, plaintext 

Działa poprawnie, ale jestem ciekawy którego z banerów pobrałem dane?

Edit:

Przed wszystkim oczywiście mam jeszcze:

[HTML] pobierz, plaintext 
$(idBaneru).find("a").each(function(i)
   {
      var top=(wysokoscBaneru+odstepBaneru)*i
      $(this).addClass('b'+i).css('top',top+'px')
   })
[HTML] pobierz, plaintext 

Edit2:
Już wiem - zła kolejność

Edit3:

A więc mój pomysł na sprawienie sobie rotatora trochę nie wypalił, najpierw pokażę kod:

Js:

[HTML] pobierz, plaintext 
//Urzywaj wyłącznie liczb naturalnych, parzystych i z oznaczonego zbioru!
//Czas w jakim baner stoi (x-x)
var czasPrzestoju=1000
//Czas trwania animacji - jeden cykl (10-x)
var czasAnimacji=10
//Ilość pixeli przemieszczonych w ciągu jednego cyklu (1-2)
var iloscPixeli=1
//Wysokosc banera (x-x)
var wysokoscBaneru=50
//Odstep pomiegdzy banerami (x-x)
var odstepBaneru=6
//Przyśpieszenie animacji gdy zostaje wyzerowana (1-2)
var przyspieszenieAnimacji=1
 
$(document).ready(function()
{
   baner('#baner')
   baner('#baner2')
   baner('#baner3')
});
 
function baner(idBaneru)
{
   wysokoscBaneruP=wysokoscBaneru/iloscPixeli
   odstepBaneruP=odstepBaneru/iloscPixeli
 
   $(idBaneru).find("a").each(function(i)
   {
      var top=(wysokoscBaneru+odstepBaneru)*i
      $(this).addClass('b'+i).css('top',top+'px')
   })
 
   cukl(idBaneru,0);
}
 
function cukl(idBaneru,cykl)
{
   cykl++
 
   for(i=0;$(idBaneru).find('a.b'+i).css('top')!=undefined;i++)
      var ilosc=i+1
 
   if(ilosc>1)
   {
      if(cykl<ilosc)
      {
         setTimeout('przesuniecieUp("'+idBaneru+'",0,'+cykl+')',czasPrzestoju)
      }
      else
      {
         ilosc=ilosc*2-1
 
         if(cykl<ilosc)
         {
            setTimeout('przesuniecieDown("'+idBaneru+'",0,'+cykl+')',czasPrzestoju)
         }
      }
   }
}
 
function przesuniecieUp(idBaneru,przesuniecie,cykl)
{
   for(i=0;$(idBaneru).find('a.b'+i).css('top')!=undefined;i++)
   {
      top=parseInt($(idBaneru).find('a.b'+i).css('top'))
      top=top-iloscPixeli
      $(idBaneru).find('a.b'+i).css('top',top+'px')
   }
 
   przesuniecie++
 
   if(przesuniecie<wysokoscBaneruP+odstepBaneruP)
      setTimeout('przesuniecieUp("'+idBaneru+'",'+przesuniecie+','+cykl+')', czasAnimacji)
   else
      cukl(idBaneru,cykl)
}
 
function przesuniecieDown(idBaneru,przesuniecie,cykl)
{
   for(i=0;$(idBaneru).find('a.b'+i).css('top')!=undefined;i++)
      var ilosc=i
 
   for(i=0;$(idBaneru).find('a.b'+i).css('top')!=undefined;i++)
   {
      top=parseInt($(idBaneru).find('a.b'+i).css('top'))
      top=top+iloscPixeli*ilosc*przyspieszenieAnimacji
      $(idBaneru).find('a.b'+i).css('top',top+'px')
   }
 
   przesuniecie++
 
   if(przesuniecie<(wysokoscBaneruP+odstepBaneruP)/przyspieszenieAnimacji)
      setTimeout('przesuniecieDown("'+idBaneru+'",'+przesuniecie+','+cykl+')', czasAnimacji)
   else
      cukl(idBaneru,0)
}
[HTML] pobierz, plaintext 

Css:

[HTML] pobierz, plaintext 
*
{
   margin:0px;
   padding:0px;
   border-width:0px;
}
 
#body
{
   margin:100px auto;
   width:990px;
}
 
.baner
{
   width:1000px;
   height:50px;
   overflow: hidden;
   position: relative;
}
 
.baner a
{
   display:block;
   position: absolute;
}
[HTML] pobierz, plaintext 

Html:

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title>Rotator</title>
      <link href="style.css" type="text/css" rel="stylesheet">
      <script src="http://www.a.cmsss.pl/admin/js/1=jquery.js" type="text/javascript"></script>
      <script src="sys.js" type="text/javascript"></script>
   </head>
   <body>
 
      <div id="body">
 
         <div id="baner" class="baner">
            <a href="http://www.onet.pl" name=odnosnik>
               <img width="1000px" alt="Baner" src="banertop.jpg">
            </a>
            <a href="http://www.o2.pl" name=odnosnik>
               <img width="1000px" alt="Baner" src="banertop2.jpg">
            </a>
            <a href="http://www.o2.pl" name=odnosnik>
               <img width="1000px" alt="Baner" src="banertop3.jpg">
            </a>
         </div>
 
 
      </div>
 
   </body>
</html>
[HTML] pobierz, plaintext 

I mam do tego dwa pytania:
1. Dlaczego dziadziała pod innymi przeglądarkami niż FF?
2. Wiem, że przy większej ilości banerów skrypt zakatuję przeglądarkę więc prosił bym o jakieś naprowadzenie jak powinno to wyglądać?

1. mam przeczucie, że wymyślasz koło na nowo; podejrzewam, że większość Twoich problemów rozwiąże animate
2. wrzuć gdzieś działający kod
3. poza tym, czemu rozbijasz selektory, skoro możesz używać w jQ np. banery('#selektor, #selektor2'), jeśli nieco podrasujesz kod

Ale wrzuć gdzieś to najpierw, potem będziemy gdybać.

Kilka przykładów:

http://www.baner.cmsss.pl/

Ale coś mi się zdaje, że oprócz wiedzy o jquery to nic z tego nie będzie wszystko się wiesza w większych ilościach.

*Wydaje mi się że sam pomysł pisania animacji w taki sposób jest żałosny...

Zdziwiłbyś się. ;p Gdyby był żałosny, nie powstawałyby moduły animacyjne, czy chociażby Ming. ;]

A jeśli chodzi o wydajność: czemu się dziwić, jak za każdym razem wyszukujesz uchwyt do warstwy zamiast go przechowywać w zmiennej pomocniczej?

OO, tak się da.

Jestem mocno początkujący w sprawach js, na pewno to poprawię, a może widzisz tu jeszcze inne poważne błędy i czy zmiana tego znacząco wpłynie na wydajność?

Jesteś gazeciarzem i codziennie roznosisz papiery tylko do kilku wybranych domów. Co będzie szybsze? Jeśli za każdym razem będziesz pytał sąsiadów, gdzie mieszkają delikwenci, czy gdy sobie zapiszesz ich adresy na kartce?

Kod poprawiłem i zaktualizowałem, jednak że nadal widać znaczne opóźnienia przy kilku identycznych banerach - kończą pracę w różnym czasie, a co jest jeszcze gorsze gdy jakiś z banerów skończy się przesuwać reszta znacznie przyśpiesza.

Tak myślę że może jest to mój zmysłowy błąd, w moim rozumieniu miały się ruszać załóżmy cztery banery i każdy miał mieć swój kontroler, w tym przypadku miało być cztery wątki między którymi nie miało być żadnego kontaktu. A wydaje mi się, że jak wydawane jest polecenie zatrzymania na x sekund to zatrzymują się wszystkie funkcje, czy aby nie?

To i tak nie ma znaczenia...

A tak w ogóle, to bym przepisał wszystko od nowa - na co tam tyle pętli?