jquery切換div與動畫

Question

我早些時候問過這個問題&提供了一些代碼，但它拒絕工作，當我把它放在div的內部，因爲網站是結構化的，所以我在這裏重試。

這裏是頁面的格式。

http://jsfiddle.net/4FMGG/2/

<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>​ 

基本上，我想複製上http://mitchell-me.com/ 服務節後面我會改變這一切等，但效果是殺死我。上次我給了兩個建議，其中一個是jquery，它在div的外部工作良好，但是因爲它必須在div中，所以我不能使用它。第二個是該網站使用tweenlite，但該方法似乎矯枉過正只是這個特殊的功能。

所以基本上即時掙扎像瘋了一樣，確實需要包裝的網站上去的這部分之前聖誕節等堆棧溢出希望一些聖誕節的運氣在這裏的xD

的代碼格式

道歉，我不能讓它正確使用這個編輯器。

Answer 1

一起鞭打，讓我知道它是否適合您的需求。 這裏是一個小提琴：http://jsfiddle.net/4FMGG/6/

CSS

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; 
} 

HTML

<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> 

的JavaScript

必須包括以下庫：

//ajax.googleapis.com/ ajax/libs/jquery/1.8.3/jquery.min.js

個

//jqueryrotate.googlecode.com/files/jQueryRotate.2.2.js

$("#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); 
});