jQuery Animate 属性滞后
开发商！ 我正在开发一个促销网站，其中主页和子页面位于同一索引中。内容的转换发生在单击菜单时。好的。
有4个子页面。左边两个，右边两个。当点击左侧第一个选项时，第二个选项隐藏。当点击第二个选项时，第一个选项隐藏。
您可以在这里看到更好的内容：http://www.safiradigital.com.br/kennermusiclab/
但是，我在这个 .animate() 左过渡中遇到了问题。从左到右，有时动画执行会出现很大的延迟。
例如，单击“O que é Music Lab？”然后，单击“Inscrição”。你会发现身体转变有很大的延迟。
有人有解决方案来修复 .animate() 上的延迟错误吗？
我的JS是：
$(".o-que-e").click(function() {
$(".content-geral").animate({
left: '195'
},2700); // Durante 2700 milisegundos
$(".videos-interna").hide();
$(".o-que-e-interna").show();
}); // Finaliza o click
$(".galeria-videos").click(function() {
$(".content-geral").animate({
left: '195'
},2700);
$(".videos-interna").show();
$(".o-que-e-interna").hide();
}); // Finaliza o click
$(".inscricao").click(function() {
$(".content-geral").animate({
left: '-3986'
},2700);
$(".regulamento-interna").hide();
$(".inscricao-interna").show();
});
$(".regulamento").click(function() {
$(".content-geral").animate({
left: '-3986'
},2700);
$(".inscricao-interna").hide();
$(".regulamento-interna").show();
});
developers!
I'm developing an promotional website where the homepage and the subpages is in the same index. The transition of the content happens on the click of the menu. Okay.
Have 4 subpages. Two on the left and two on the right. When clicks on the first option of the left, the second hide. When clicks on the second option, the first hide.
You can see better here: http://www.safiradigital.com.br/kennermusiclab/
But, i have a problem in this .animate() left transition. From the left to the right, sometimes occur a big delay to the animate execute.
Example, click on "O que é Music Lab?" and after, click on "Inscrição". You see an big delay to the body transition.
Anyone have an solution to fix this delay bug on .animate()?
My JS is:
$(".o-que-e").click(function() {
$(".content-geral").animate({
left: '195'
},2700); // Durante 2700 milisegundos
$(".videos-interna").hide();
$(".o-que-e-interna").show();
}); // Finaliza o click
$(".galeria-videos").click(function() {
$(".content-geral").animate({
left: '195'
},2700);
$(".videos-interna").show();
$(".o-que-e-interna").hide();
}); // Finaliza o click
$(".inscricao").click(function() {
$(".content-geral").animate({
left: '-3986'
},2700);
$(".regulamento-interna").hide();
$(".inscricao-interna").show();
});
$(".regulamento").click(function() {
$(".content-geral").animate({
left: '-3986'
},2700);
$(".inscricao-interna").hide();
$(".regulamento-interna").show();
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我的猜测是您与“o-que-e”类有多个链接。您的点击处理程序会调用所有这些。所以每次点击都会产生不止一次的动画。这可能会减慢速度。
my guess is you have more than one link with class 'o-que-e'. your click handler calls them all. so you are animating more than once for each click. that might slow things down.
这里有点晚了，但是当您处理大区域时（例如将 .insricao 元素设置为左 -3986 像素），Chrome 尤其会受到延迟的困扰。
在这里查看我的答案，也许会有帮助：https://stackoverflow.com/a/15634773/2211053
A bit late here, but when you're working with large areas (such as animating the .inscricao element left -3986 pixels) Chrome especially suffers from delays.
See my answer here and maybe it will help: https://stackoverflow.com/a/15634773/2211053