Zmiana obrazków w jquery co kilk sekund z animacja

Odpowiedz Nowy wątek
2015-02-01 15:48
0

Mam kolumny w kazdej po 5 obrazków. Chce zrobic tak aby kazdy obrazek zmieniał się losowo co iles sekund i kazdy w innym czasie aby nie było non stop e wszystkie razem.
Kazdy obrazek jest inny oraz podmieniany także. Zrobiłem cos takiego

setInterval(function(){$('#cf1').toggleClass('liveEventsActive', 1000)}, 4000);
    setInterval(function(){$('#cf2').toggleClass('liveEventsActive', 1000)}, 14000);
    setInterval(function(){$('#cf3').toggleClass('liveEventsActive', 1000)}, 12000);
    setInterval(function(){$('#cf4').toggleClass('liveEventsActive', 1000)}, 4500);
    setInterval(function(){$('#cf5').toggleClass('liveEventsActive', 1000)}, 14000);
    setInterval(function(){$('#cf6').toggleClass('liveEventsActive', 1000)}, 3000);
    setInterval(function(){$('#cf7').toggleClass('liveEventsActive', 1000)}, 4000);
    setInterval(function(){$('#cf8').toggleClass('liveEventsActive', 1000)}, 24000);
       setInterval(function(){$('#cf9').toggleClass('liveEventsActive', 1000)}, 2000);
       setInterval(function(){$('#cf10').toggleClass('liveEventsActive', 1000)}, 5000); 

w css takie coś

#cf1 .two_img , #cf2 .two_img , #cf3 .two_img , #cf4 .two_img , #cf5 .two_img , #cf6 .two_img , #cf7 .two_img , #cf8 .two_img, #cf9 .two_img, #cf10 .two_img  {

    display: none;
}
#cf1 .one_img, #cf2 .one_img, #cf3 .one_img, #cf4 .one_img, #cf5 .one_img, #cf6 .one_img, #cf7 .one_img, #cf8 .one_img, #cf9 .one_img, #cf10 .one_img {

    display: block;
}
#cf1.liveEventsActive .two_img, #cf2.liveEventsActive .two_img, #cf3.liveEventsActive .two_img, 
#cf4.liveEventsActive .two_img, #cf5.liveEventsActive .two_img, #cf6.liveEventsActive .two_img, 
#cf7.liveEventsActive .two_img, #cf8.liveEventsActive .two_img, #cf9.liveEventsActive .two_img, 
#cf10.liveEventsActive .two_img  {

    display: block;
}
#cf1.liveEventsActive .one_img, #cf2.liveEventsActive .one_img, #cf3.liveEventsActive .one_img, #cf4.liveEventsActive .one_img, #cf5.liveEventsActive .one_img,
#cf6.liveEventsActive .one_img, #cf7.liveEventsActive .one_img, #cf8.liveEventsActive .one_img, #cf9.liveEventsActive .one_img, #cf10.liveEventsActive .one_img  {

    display: none;
}

Wszystko ok działa ale chce dorobić animacje przejscia i niestety nie da się ma ktos pomysł jak to zrobić?

edytowany 2x, ostatnio: dzek69, 2015-02-01 17:14
używaj tagów kolorujących składnię - dzek69 2015-02-01 17:14
Nie stylizuj ID. - hauleth 2015-02-02 10:29
Stylizowanie ID ma sens, ale nie w tym przypadku. - dzek69 2015-02-02 10:58
Stylizowanie ID to zła praktyka. Zamiast tego lepiej nadać parę różnych klas do 1 elementu. - hauleth 2015-02-02 11:05
To jakaś nowa dziwna szkoła ;) - dzek69 2015-02-02 11:28
Nie nowa i czemu dziwna? Style mają być proste, semantyczne i reużywalne. Stylizowanie ID nie zapewnia ani 1 z tych punktów. - hauleth 2015-02-02 11:30

Pozostało 580 znaków

2015-02-01 17:15
2

A dlaczego nie gotowiec, tylko wynajdywanie koła od nowa, w dodatku w tak kiepski sposób (poczytaj o DRY w programowaniu - Twój kod poza cyferkami to w kółko to samo)?


Pozostało 580 znaków

2015-02-01 19:41
0

no wiem ze to nie jest ok ale taki mialem pomysl tylko na szybkiego ok zaraz sie biore za czytanie tego:)

http://pl.wikipedia.org/wiki/DRY - ale to jest tylko offtop do Twojego problemu - dzek69 2015-02-01 20:23

Pozostało 580 znaków

2015-02-01 21:19
0

ok dzieki a miales na mysli gotowca tzn?

Pozostało 580 znaków

2015-02-01 22:31

W sumie to źle Cię zrozumiałem, nie znam gotowca na Twój problem :/
Ale na pewno: przygotuj sobie listę obrazków (linków). Potem nakładaj nowy element na stary, stary usuwaj. Pytanie jest takie: jaki rodzaj animacji w ogóle Cię interesuje?


Pozostało 580 znaków

2015-02-01 22:41
0

@gucio666 ten kod to "lekka" masakra. Proponuje Ci zainteresować się Bootstrapem, jest tam taki element jak karuzela. Można to fajnie skonfigurować i wtedy powinieneś uzyskać interesujący Cie efekt.

edytowany 1x, ostatnio: Sebastiano, 2015-02-01 22:42

Pozostało 580 znaków

2015-02-01 23:01
0

przenikanie. Potrzebuje najlepszy sposob na to. Carousela to nie to ona jest do tworzenia sliderów chyba nie zrozumiałeś mnie.

edytowany 1x, ostatnio: gucio666, 2015-02-01 23:02

Pozostało 580 znaków

2015-02-02 10:01
0

Myślę że metody: FadeIn() i FadeOut() będą dla Ciebie najlepsze (chyba z biblioteki jquery).

Pozostało 580 znaków

2015-02-05 03:41
1

Zgadzając się z przedmówcami, DRY ftw!

Przy większej ilości takich wywołań narażasz się na brzydki spadek wydajności, generalnie nie używaj setTimeout i setInterval, zamiast tego użyj requestAnimationFrame (dla starych przeglądarek np. ie9 są polyfille, np. https://gist.github.com/paulirish/1579671).

A jeszcze lepiej, jeśli masz możliwość, to zrób to w css3, nie będziesz obciążał strony tymi zegarami w javascript, w skrócie można to zrobić tak:

  • CSS: robisz sobie jakie chcesz animacje keyframes w css, której kroki są zdefiniowane za pomocą % (http://www.w3schools.com/css/css3_animations.asp), np:
    @keyframes animateImg{
    0% {opacity: 0;}
    49.99% {opacity: 0;}
    50% {opacity:1;}
    99.9% {opacity:1;}
    100% {opacity:0;}
    }
  • HTML: dodajesz to do swoich obrazków (np. dodaj im klasę .animateImg)
  • CSS: podpinasz animacje do obrazków:
    .animateImg{animation: animateImg linear infinite;}
  • JS: po wczytaniu danych elementów na stronie dopisujesz im inlinowo atrybut animation-duration, np w jQuery:
    $('.animateImg').each(function(){$(this).css({'animation-duration': Math.floor(1000 + Math.random() * 2000) + 's'})});

W przykładzie nie pisałem prefixów cssowych, może być też gdzieś literówka bo nie testowałem ;p

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0