大家好,我有一个非常简单的函数
enableModule : function(moduleName){
var module = $('div#'+moduleName);
console.log('enabling '+moduleName);
console.time('animate');
module.animate({'opacity' : '1.0'}, 300, function(){console.timeEnd('animate');});
module.find('.disabled_sheild').remove();
module.removeClass('disabled');
console.log('end of enable Module');
}
动画本身,不透明度的变化非常快,但调用它时会有延迟。 console.time() 报告的时间为 2540MS 及以上。我在想这可能是因为 div#module 和它的 child 一起被动画化了吗?但这个剂量有意义,因为我有另一个函数“disableModule”,它反向执行相同的操作并以合理的速度运行。
这里是禁用模块功能,进行的更多,但返回时间约为 242 毫秒
disableModule : function(moduleName){
$('div#'+moduleName+', div.'+moduleName).each(function(){
var module = $(this);
module.prepend('<div class="disabled_sheild"></div>');
var sheild = module.find('.disabled_sheild');
sheild.css({'position' : 'absolute', 'z-index' : '200'});
sheild.width(module.width());
sheild.height(module.height());
jQuery.each(jQuery.browser, function(i) {
if($.browser.msie){
//module.css("display","none");
//if using ie give sheild a transparent background layout
}else{
console.time('animate');
module.animate({'opacity' : '0.5'}, function(){ console.timeEnd('animate');});
}
});
});
}
最佳答案
经过一些艰苦的故障排除后,我发现它是禁用方法中浏览器检测循环的问题:
jQuery.each(jQuery.browser, function(i) {
if($.browser.msie){
//module.css("display","none");
//if using ie give sheild a transparent background layout
}else{
console.time('animate');
module.animate({opacity : 0.5}, 200, function(){console.timeEnd('animate');});
}
});
注释掉这个 block 使一切都加快了速度。在尝试优化其他所有内容后,我差点把头发拔出来。
关于javascript - 为什么这个 jQuery .animate 调用这么慢?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1801018/