php - How do I fade one <div> out with jQuery and fade another <div> in? -

i building portfolio , want create gallery display projects. have selection of 7 divs containing content form tabbed navigation-esque section of website. other tabbed navigations, 1 div containing content active @ 1 time. however, unlike other tabbed navigations, 1 controlled php. if content (currently set file_exists function mysql controlled) available, div written navigation , appropriate link displayed. if not, link hidden , div not written. files required based on $_get call, , files required vary depending on string inside $_get variable.

each tab has unique id. (since no javascript expert), have "reset" option sets style of named divs "hidden" style, before bringing chosen div "visible" state.

what want do, if possible, this:

i want go #div1 #div2. divs 1, 2, 4 , 6 (for example) active. click link tells page display #div2 (the function says hide divs , display #div2, hiding of other divs separate function, called within function). #div1 visible.

1. #div1 fade out
2. #div2 fade in

divs 4 , 6 not affected. divs 3, 5 , 7 not touched since (as far page concerned) not exist. each fade can take 3 seconds example.

i vaguely aware $('#div2').fadein(3000); constitute fade in effect #div2 , fadeout() counterpart constitute fade out. how use jquery (i have 1.5.2 on site) fade #div1 out , fade #div2 in without affecting other div, or easier keep code hides of divs , fade #div2 in? please remember, not javascript expert, i'm barely beginner, please not insult length of script or inability understand guess simple.

please remember have 7 divs in navigation. script must find div visible based on link clicked , fade out, fade in chosen div, , must not touch of remaining divs.

is easy enough understand , gain answer?

edit @ 01:46 gmt, 30/04/2010

thanks, these don't want. work if there 2 divs, remember, there seven, , link should know div visible , not accounted for.

i have php script "if file exists, make div , apply style 'visibletab' it. otherwise, make it, apply style 'hiddentab' it." javascript (now jquery) code follows:

  function resettabs() {     $("#postersandprint").removeclass("tabs visibletab").removeclass("hiddentab").addclass("hiddentab");     $("#mobileapp").removeclass("tabs visibletab").removeclass("hiddentab").addclass("hiddentab");     $("#stylesheets").removeclass("tabs visibletab").removeclass("hiddentab").addclass("hiddentab");     $("#storyboards").removeclass("tabs visibletab").removeclass("hiddentab").addclass("hiddentab");     $("#motionpieces").removeclass("tabs visibletab").removeclass("hiddentab").addclass("hiddentab");     $("#interactives").removeclass("tabs visibletab").removeclass("hiddentab").addclass("hiddentab");     $("#developmentwork").removeclass("tabs visibletab").removeclass("hiddentab").addclass("hiddentab");   }    function showtab(tabname) {     resettabs();     $('#'+tabname).fadein(3000);     $("#"+tabname).removeclass("hiddentab").addclass("tabs visibletab");   } 

the principle this:

my link has onclick calls showtab function , places appropriate div id inside function, example:

<a href="javascript:;" onclick="showtab('mobileapp');">link</a> 

the function hides of divs , fades in 1 called 'tabname', in case, "mobileapp".

i have told each reset function remove class called 'hiddentab' class called 'visibletab' , 'tabs' before adding 'hiddentab' class kind of "fail safe" approach. have told showtab function explicitly remove "hiddentab" class tab want visible , add classes "tabs" , "visibletab". forget why have 2 styles, sure reason come me.

i want jquery script know div visible , 1 not out of selection of seven. #div1 , #div2 example, div selection. before, when used document.getelementbyid function, worked perfectly, wanted add fade on script make better. now, works, when cycle through divs once. afterwards, appends div underneath visible one, doesn't hide them. know have missed something, or have messed somewhere, have missed? have messed up?

while not set in tabs jsfiddle example bit. [edit, added total 4 divs now, wait animation finish before clicking next button]

basically searches container div element visible using :visible selector

the .eq(0) says grab first visible element out of collection selector returns. if there no visible elements selects first element.

then selects id show.

calls out both animations @ same time with:

vis.fadeout(speed); next.fadein(speed); 

if want wait 1 fade out before fading next in use callback mentioned in other answers.

this works fine on new-ish browsers chokes bit on ie7 or less.

alternatively can collection of hidden elements :hidden

if want more direct example can post html exact selectors best suited.