通过缓存选择器结果来优化基于JQuery的动画?

时间:2012-06-04 14:02:09

标签: jquery jquery-animate

我制作了一个基于以下jQuery函数的动画:hide(),show(),animate()。

这个动画消耗了大量的CPU(像CPU一样使用Flash),Chrome告诉我(通过CSS选择器分析工具)我有很多类似的CSS选择器用法(CSS Selector Profile)。

这些选择器是否仅由渲染引擎使用?这是否包括使用$()时的jQuery节点搜索(我假设它被hide(),show()或animate()调用?)

如果是第二个问题,我怎么能覆盖这个函数来缓存某个节点? (通过硬编码一些选择器,其结果在我的动画逻辑中不会改变)。

编辑:我正在实现帧之间的过渡,每帧都是背景上的Ken Burns效果

EDIT2:这是一个jQuery插件,尽可能使用CSS3动画https://github.com/benbarnett/jQuery-Animate-Enhanced

1 个答案:

答案 0 :(得分:0)

如果您使用以下代码执行大量jquery动画:

$('div.myclass').show();
 ...
$('div.myclass').hide();
....
$('div.myclass').toggle();

您可能希望查看链接jquery选项:

$('div.myclass').show().addClass('sdf').children('li').slideToggle()

或将选择器分配给变量并重用该变量

 var $ele = $('div.myclass');
 $ele.show();
 ...
$ele.hide();
....
$ele.toggle();