Question

好的，我在网站上看到了一个功能，对我来说它看起来很神奇，我一直在尝试重新创建一个类似的功能，但甚至无法接近。

您可以在此处查看该功能 - http://mitchell-me.com/ 如果单击“服务”。有电气和电气;机械。

当您点击按钮时，圆圈会旋转，其上的图标会淡入新图标＆amp; div的淡出/淡出。我一直试图用jquery切换来做到这一点，但我无法接近。

我希望在这里获得任何/所有建议或简单的代码示例。在此先感谢我已经因为这个而失去理智。

Answer 1

他们的javascript似乎正在改变CSS。 CSS完成了转换和淡化工作。

$("#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。

Answer 2

我试图在jsFiddle中重建这个效果，这是result。如果您使用此代码，请确保包含此代码：<script src="http://jqueryrotate.googlecode.com/files/jQueryRotate.2.2.js"></script>否则轮换将无效。所有的旋转和衰落都是通过jQuery完成的，以获得更好的兼容性。

Jquery切换divs＆amp;随着衰落而旋转

2 个答案: