jquery使用动画切换div

我之前问过这个问题&提供了一些代码，但是当我把它放在div中时，它拒绝工作，因为网站是结构化的，所以我在这里重试

这是页面的格式

方框1a
方框2a
方框2b
方框1b
​

我基本上想复制上的服务部分 我以后会把它全部改变，等等，但效果真是太糟了。上次有人给了我两个建议，一个是jquery，它在div之外工作得很好，但是因为它必须在div中，所以我不能使用它。第二个原因是该站点使用了tweenlite，但这种方法对于这一特定功能来说似乎有些矫枉过正

所以基本上我拼命挣扎，真的需要在圣诞节前把这一部分网站整理好，希望在stack overflow xD上有一些圣诞节的好运

---

对代码格式表示歉意，我无法使用此编辑器使其正常运行

把这个拼凑起来，告诉我是否适合你的需要。 这是一把小提琴：

css

html

---

嗨，这是动画等完美的尝试，以配合在一起的4个div的，左上和右下显示，然后当切换，他们淡入淡入&右上和左下淡入。

<div style="width:960px;">
    <div style="float:left; width:960px;">
        <a href='#'>Electric</a>
        <a href='#'>Mechanic</a>
    </div>                    
    <div style="width:320px; float:left;">
        <div id='elec'>Box 1a</div>
        <div id='meca'>Box 2a</div> 
    </div>
    <div style="width:320px; float:left;">
       <img src="dial.png" style="margin-top:150px;">
    </div>
    <div style="width:320px; float:right;">
        <div id='meca'>Box 2b</div> 
        <div id='elec'>Box 1b</div>
    </div>
</div>​

    body{
    text-align:center;
    background:#eee;
}
.container {
    width:400px; margin:100px auto 0;
    text-align:center;
    position:relative;
}
#dial {
    width:210px;position:relative;margin:0 auto;
}
#switch {
    cursor: pointer;
}
#gear {
    position:absolute;
    top:55px;left:55px;
    opacity:0;
}
#bulb {
    position:absolute;
    top:70px;left:83px;
}
#mech1, #mech2, #elec1, #elec2 {
    position:absolute;
    width:100px;
    height:100px;
    background:#fff;
}
#mech1 {
    top:0;right:0;
    display:none;
}
#elec1 {
    top:0;left:0;
}
#mech2 {
    bottom:0;left:0;
    display:none;
}
#elec2 {
    bottom:0;right:0;
}

<div class="container">
    <div id="dial">
        <img src="http://mitchell-me.com/img/dial.png">
        <div id="bulb">
            <img src="http://mitchell-me.com/img/bulb.png">
        </div>
        <div id="gear">
            <img src="http://mitchell-me.com/img/gear.png">
        </div>
    </div>
    <div id="mech1"></div>
    <div id="mech2"></div>
    <div id="elec1"></div>
    <div id="elec2"></div>
    <div id="switch">
        <a id="one">One</a>
        <a id="two">Two</a>
    </div>
</div>

$("#one").click(function(){
    $('#dial').rotate({
        angle: 100, 
        animateTo:0,
        duration:1000
    });
    $('#bulb').animate({'opacity':1}, 1000);
    $('#gear').animate({'opacity':0}, 1000);
    $('#mech1, #mech2').fadeOut(1000);
    $('#elec1, #elec2').fadeIn(1000);
});  


$("#two").click(function(){
    $('#dial').rotate({
        angle: 0, 
        animateTo:100,
        duration:1000
    });
    $('#bulb').animate({'opacity':0}, 1000);
    $('#gear').animate({'opacity':1}, 1000);
    $('#mech1, #mech2').fadeIn(1000);
    $('#elec1, #elec2').fadeOut(1000);
});