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

I am building my portfolio and I want to create a gallery to display my projects. I have a selection of seven divs containing content that form a tabbed navigation-esque section of my website. As with other tabbed navigations, only one div containing content will be active at any one time. However, unlike other tabbed navigations, this one is controlled by PHP. If certain content (currently set to a file_exists function but will soon be MySQL controlled) is available, the div will be written into the navigation and the appropriate link will be displayed. If it is not, then the link will be hidden and the div will not be written. The files required are based on a $_GET call, and the files required vary depending on the string inside my $_GET variable.

Each tab has a unique id. Currently (since I am no Javascript expert), I have a "reset" option that sets the style of all named divs to a "hidden" style, before bringing my chosen div to a "visible" state.

What I want to do, if it is possible, is this:

I want to go from #div1 to #div2. Divs 1, 2, 4 and 6 (for this example) are active. I click the link that tells my page to display #div2 (the function currently only says to hide ALL divs and then display #div2, the hiding of all other divs is a separate function, which is called within this function). #div1 is currently visible.

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

Divs 4 and 6 will not be affected. Divs 3, 5 and 7 will not be touched since they (as far as my page is concerned) do not exist. Each fade can take 3 seconds for this example.

I am vaguely aware that $('#div2').fadeIn(3000); would constitute a fade in effect for #div2 and the fadeOut() counterpart would constitute a fade out. How do I use jQuery (I have 1.5.2 on my site) to fade #div1 out and fade #div2 in WITHOUT affecting any other div, or is it easier to keep the code as it is where it hides all of my divs and just fade #div2 in? Please remember, I am not a Javascript expert, I'm barely a beginner, so please do not insult the length of my script or my inability to understand something which I guess would be so simple.

Please remember that I have up to seven divs in my navigation. The script must find the div that is visible based on the link that is clicked and fade it out, then fade in my chosen div, and it must not touch any of the remaining divs.

Is that easy enough to understand and gain an answer?

EDIT @ 01:46 GMT, 30/04/2010

Thanks, but these don't look like what I want. They look like they would work if there were only two divs, but remember, there are up to seven, and the link should know which div is visible and which are not accounted for.

I currently have my PHP script to say "If this file exists, then make this div and apply the style 'visibleTab' to it. Otherwise, make it, but apply the style 'hiddenTab' to it." My Javascript (now jQuery) code is as 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 is this:

My link has an onclick that calls my showTab function and places the appropriate div id inside the function, so for example:

<a href="javascript:;" onclick="showTab('mobileapp');">Link</a>

The function hides all of the divs and then fades in the one called by 'tabname', in this case, "mobileapp".

I have told each reset function to remove any class called 'hiddenTab' as well as any class called 'visibleTab' and 'tabs' before adding the 'hiddenTab' class as a kind of "fail safe" approach. I have also told my showTab function to explicitly remove the "hiddenTab" class from my tab that I want visible and to add the classes "tabs" and "visibleTab". I forget why I have two styles, but i am sure the reason will come to me.

I want my jQuery script to know which div is visible and which one is not out of the selection of seven. The #div1 and #div2 was an example, but it could be any div from the selection. Before, when I used the document.getElementById function, it worked perfectly, I just wanted to 开发者_如何学运维add a fade on to the script to make it look better. Now, it works, but only when I cycle through the divs once. Afterwards, it just appends my div underneath the visible one, it doesn't hide them. I know I have missed something, or I have messed up somewhere, but what have I missed? Where have I messed up?

While not set up in tabs hopefully this jsfiddle example will help you a bit. [Edit, added total 4 divs now, wait for animation to finish before clicking the next button]

Basically it searches the container div for an element that is visible using the :visible selector

The .eq(0) says to only grab the first visible element out of the collection the selector returns. If there are no visible elements it just selects the first element.

Then it selects the id to show.

Calls out both animations at the same time with:

vis.fadeOut(speed);
next.fadeIn(speed);

If you want to wait for one to fade out before fading the next in use the callback mentioned in the other answers.

This works fine on all new-ish browsers but chokes a bit on IE7 or less.

Alternatively you can get a collection of hidden elements with :hidden

If you want a more direct example you can post your html so that we could help with the exact selectors that are best suited.

Maybe this is what you want?

  $('#div1').fadeOut('3000', function() {
       $('#div2').fadeIn();
  });

When you call the any of the jQuery effect functions, one of the parameters is a callback function which is called when the animation is complete. You simply need to do something like this

$("#div1").fadeOut(1000, function(){
    $("#div2").fadeIn(1000);
});

Here is a walkthough

$("#div1").fadeOut(1000, function(){

This says that when the div with an id of "div1" will face out for 1000 milliseconds (1 second) and after it will call the function.

$("#div2").fadeIn(1000);

This simply makes you new idea fade in after the other one has completely finished fading out.

});

Simply closes up everything that we opened.

I think what you are worried about is that

$("div").fadeOut(1000);

Would fade out all divs on the page but putting a hash mark and an id you can identify a specific one my it's id like "#div1"

Also, you set it with the id attribute:

<div id = "div1"></div>

I found this jShowOff: a jQuery Content Rotator Plugin by Erik Kallevig - http://bit.ly/NgLRdb give it a look, seems pretty useful....

currently trying to put it as a module on my joomla site

$("#button").click(function()
{
$("#div1").fadeOut("fast");
$("#div2").fadeIn("slow");
});

This code will work as button clicks which will fade out div1 and then slowly fade in an another div as div2.