使用jQuery在div:间转换

我有三个 div s。我有一个主div，为用户提供选择查看其他两个div的选项。如果我只使用文本并且不隐藏原始div，它可以正常工作。但我想使用图像映射并让主div隐藏然后如果用户选择他们可以单击后退按钮并重新显示div并且他们正在查看的那个淡出。我有部分工作但需要帮助完成脚本，所以它正常工作，因为JS不是我的强项。以下是代码：

I have three divs. I have a main div that presents the user an option of choosing to view the two other divs. It works okay if I use just text and do not hide the original div. But I want to use an image map and have the main div hide then if the user chooses they can click a back button and have the div re-appear and the one they are viewing fade out. I have it partly worked out but need help finishing the script so it works properly as JS is not my strong suit. Here is the code:

JS

JS

// I am using jQuery Version 1.7.2

var $j = jQuery.noConflict();

//Script for Choosing which form to display
$j("#transformed-link, #changed-link").live('click',
 function(){  

    //figure out what button was clicked. 
    if(this.id === "transformed-link"){
        var btnA = $j(this);
        var btnB = $j("#changed-link");
        var divA = $j('#transformed-aviation');
        var divB = $j('#changed-aviation');
    }
    else{
        btnA = $j(this);
        btnB = $j("#transformed-link");
        divA = $j('#changed-aviation');
        divB = $j('#transformed-aviation');
    }

    //make sure it is not already active, no use to show/hide when it is already set
    if(btnA.hasClass('active')){
        return; 
    }

    //see if div is visible, if so hide, than show first div
    if(divB.is(":visible")){        
        divB.fadeOut("slow", function(){
             divA.fadeIn("slow");
        });
    }
    else{//if already hidden, just show the first div
        divA.fadeIn("slow"); 

         //Add and remove classes to the buttons to switch state
    btnA.addClass('active').removeClass('inactive ');
    btnB.removeClass('active').addClass('inactive ');

    }
}    

）;

HTML

HTML

<div id="nav-main">
<!-- This is the original main div that users will choose which div to show. -->
<img src="https://www.it1352.com/nav-main.jpg"     usemap="#Map" border="0" />
<map name="Map" id="Map">
  <area shape="rect" coords="52,146,420,258" href="https://www.it1352.com/1020929.html"   />
  <area shape="rect" coords="536,145,876,267" href="https://www.it1352.com/1020929.html"    />
</map>
</div>

<div   class="hide">
<!-- CONTENT OF DIV -->
Link to return to main div? 
</div>

<div   class="hide">
<!-- CONTENT OF DIV -->
Link to return to main div? 
</div>

CSS

CSS

/ * CSS的大多数只是特定于页面的。 nav-main，变换航空，变换航空只是JS的标识符，没有分配给它们的代码。 * /

/* Majority of the CSS is only page specific. nav-main, transformed-aviation, changed-aviation are just identifiers for JS and have no code assigned to them. */

.hide{ display:none; }

我的问题归结为：

如何淡出原始div并使其淡入用户选择的那个。然后通过链接允许用户返回主div（从而淡出当前div并在主要或原始div中淡入）。

How do you fade out the original div and have it fade in the one that the user choose. Then with a link allows an user to go back to the main div (thus fading out the current div and fading in the main or original div).

随意修改或完全重写原始脚本。但请提供示例我对此脚本有帮助并且不提供知道足够的JS自己写。

Feel free to modify or completely rewrite the original script. But please provide examples as I had help with this script and do not know enough JS to write it by myself.

谢谢！