Zmiana obrazków w jquery co kilk sekund z animacja

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ć?

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)?

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

ok dzieki a miales na mysli gotowca tzn?

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?

@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.

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

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

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