fadein - how to fade out one div and fade in another div at same time using Jquery -

i have 3 divs,
newdivforwraping1,#newdivforwraping5,#newdivforwraping9.

i want fadein newdivforwraping1 div , fade out #newdivforwraping5,#newdivforwraping9

and after fade out newdivforwraping1,#newdivforwraping9
, fadein #newdivforwraping5 , fadein#newdivforwraping9`

and fadeout #newdivforwraping1,#newdivforwraping9.

at point on screen, have div seen.

that

<div1>--fade in <div2>--fade out <div3>--fade out  <div2>--fade in <div3>--fade out <div1>--fade out  <div3>--fade in <div1>-fade out <div2> -- fade out 

kindly notice whatever div appears on screen, on same location on screen. have set timer using setinterval repeat process when user hover mouse on it, want pause (if not possible, stop). , resume when mouse not hovering on it. have my code here , see current partially working solution here. helping out..

try it

(function () { var = 1; var timer=setinterval(function () {     if(i>3) {i=1};     runanimation(i, i, i);     i++; },1000); //increase 3000 if each fade in runanimation 1000 on function runanimation   function runanimation(a,b,g){     c = == 1? 'fadein' : 'fadeout';     d = b == 2? 'fadein' : 'fadeout';     h = g == 3? 'fadein' : 'fadeout';      $("#newdivforwraping1")[c](0); //if ==1 $("#newdivforwraping1").fadein(0) else $("#newdivforwraping1").fadeout(0)     $("#newdivforwraping5")[d](0);     $("#newdivforwraping9")[h](0); }  $("#newdivforwraping1,#newdivforwraping5,#newdivforwraping9").hover(function() {     clearinterval(timer); }, function(){     timer=setinterval(function () {     if(i>3) {i=1};     runanimation(i, i, i);     i++; },1000); });      })(); 

demo

http://jsfiddle.net/rqnrt/32/