Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Animacja dla elementów w pętli
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Bejkrools
Witajcie, mam utworzone taką strukturę HTML:
  1. <div class="circle_area">
  2. <a class="url_circle" href="#">
  3. <div class="circle_main">0</div>
  4. </a>
  5. <a class="url_circle" href="#">
  6. <div class="circle" style="display: none; ">1</div>
  7. </a>
  8. <a class="url_circle" href="#">
  9. <div class="circle" style="display: none; ">2</div>
  10. </a>
  11. </div>


i teraz za pomocą pęli w jQ chciałbym animować kolejne elementy, dla uproszczenia niech to będzie tylko fadein() dla elementów .circle

Zrobiłem coś takiego, ale nie dzieła :-(

  1. $( document ).ready(function() {
  2. var numItems = $('.circle').length;
  3. $('.circle_main').mouseover(function(){
  4. var object = $('.circle_main').next('.circle');
  5. for (var i = 0; i < numItems; i++)
  6. {
  7. object.fadeIn();
  8. var object = object.next('.circle');
  9. console.log("Tekst: "+object.text());
  10. }
  11. });
  12. });


Nie jestem pewien wybierania następnego obiektu, ale nie wiem jak móbym to sprawdzic :-( Próbowałem za pomocą konsoli ale pokazuje tylko "Tekst:"
Comandeer
$.fn.next bierze najbliższego sąsiada danego elementu, który dodatkowo pasuje do podanego selektora. Z tego też względu przy obecnej strukturze HTML ten kod nie ma prawa działać. Musiałbyś pobrać rodzica .circle_main, przejść na kolejny link i dobrać się do jego dziecka .circle

Proponuję inną rzecz: operowanie na kolekcji $('.circle') przy pomocy $.fn.eq
sazian
Kod
$('.circle_main').each(function(){
   $(this).fadeIn();
   console.log("Tekst: "+$(this).text());
});
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.