gpt4 book ai didi

Jquery 切换 div 并随淡入淡出旋转

转载 作者:太空宇宙 更新时间:2023-11-04 15:26:14 24 4
gpt4 key购买 nike

好的,我在网站上发现了一个功能,对我来说它看起来很棒,我一直在尝试重新创建一个类似的功能,但我什至无法接近。

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

当您单击按钮时,圆圈会旋转,圆圈上的图标会淡入新图标中,并且 div 会淡出/淡入。我一直在尝试使用 jquery 切换来做到这一点,但我无法接近。

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

最佳答案

他们的 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;}}

看起来他们正在使用 TweenliteTweenmax

关于Jquery 切换 div 并随淡入淡出旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14012010/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com