Jquery切換divs和旋轉與淡入淡出

Question

好吧，我遇到了一個網站上的功能，對我來說它看起來很棒，我一直在嘗試重新創建一個類似的功能，但甚至無法完成。

您可以在此處看到此功能 - http://mitchell-me.com/ 如果單擊服務。有電器&機械。

當您單擊按鈕時，圓形會旋轉，其上的圖標會淡入圖標& div的淡入/淡入。我一直在嘗試使用jquery切換，但我無法靠近。

我希望在這裏得到任何/所有的建議或簡單的代碼示例。在此先感謝我已經失去了我的想法3天這一點。

Answer 1

我試圖在jsFiddle重建這個效果，這是result。如果您使用此代碼，請確保包含此代碼：<script src="http://jqueryrotate.googlecode.com/files/jQueryRotate.2.2.js"></script>否則輪換將不起作用。所有的旋轉和淡入都是通過jQuery完成的，以獲得更好的兼容性。

Answer 2

他們的JavaScript似乎在改變CSS。 CSS做了轉換和淡入淡出的工作。

我snooped through their javascript ...

$("#service li").click(function(e){e.preventDefault();var index=$(this).index();$('#service li').removeClass("active");if(!$(this).hasClass("active")&&!intrans){intrans=true;switch(index){case 0:TweenLite.to($(".dial"),1.5,{css:{shortRotation:0},ease:Expo.easeInOut});TweenLite.to($(".gear"),1.5,{css:{autoAlpha:0,rotation:0},ease:Expo.easeInOut});TweenLite.to($(".bulb"),1.5,{css:{autoAlpha:1,rotation:0},ease:Expo.easeInOut});$('#electric, #electric1').delay(800).animate({opacity:1},{easing:easeType,duration:"100",complete:function(){}});$('#mechanic, #mechanic1').delay(200).animate({opacity:0},{easing:easeType,duration:"100",complete:function(){intrans=false}});break;case 1:TweenLite.to($(".dial"),1.5,{css:{shortRotation:115,transformOrigin:"103px 103px"},ease:Expo.easeInOut});TweenLite.to($(".bulb"),1.5,{css:{autoAlpha:0,x:0,y:0,rotation:120,transformOrigin:"20px 40px"},ease:Expo.easeInOut});TweenLite.to($(".gear"),1.5,{css:{autoAlpha:1,x:0,y:0,rotation:120,transformOrigin:"50px 48px"},ease:Expo.easeInOut});$('#electric, #electric1').delay(200).animate({opacity:0},{easing:easeType,duration:"100",complete:function(){}});$('#mechanic, #mechanic1').delay(800).animate({opacity:1},{easing:easeType,duration:"100",complete:function(){intrans=false}});break;}} 

它看起來像他們正在使用Tweenlite和Tweenmax它。