问题是,我有一个html块的树结构,全局容器是固定宽度(X)和高度(Y)。当我单击某个级别上的其中一个块时,所有其他块会缩小到某个大小,而单击的块会扩大到剩余空间,并且子级会出现在它的位置。
对于所有缩小我使用默认animate
函数缓和效果,收缩1级时,为了避免放大错误,我必须做这样的事情:
$tabs.not($obj).animate({height:32<<$obj.getVerUp().length+"px"},{duration:300,
step:function() {
$obj.height(function(){
var sum = 0;
$tabs.not($obj).each(function(){
sum += $(this).height();
});
return $obj.getCont().height()-sum+"px";
});
}
});
$tabs
是当前级别的所有标签$obj
- 是我要放大的一个标签
主要问题是:
当我打开一个深层次的选项卡时,我必须为更高级别的所有选项卡设置动画以缩小一点,因此$obj
X和Y会改变,因此当前动画必须使用新的价值观,但如果我在不同的级别上调用3个不同的动画,我必然会得到一个错误,当更深层次的动画之一完成前一步时,上的那个等级以上,将物体放大5-10个像素,并且该空间不会用完。
第二个问题是必须有大约50个对象动画同时使用缓动,这有点矫枉过正。
最后一个问题就是我在动画上调用step
回调,如上图所示,我有一种奇怪的感觉,它为每个动画分别调用步骤 $tabs
集合的>,我需要列表中的所有标签一步(以避免不必要的脚本)
可能还有其他方法可以修复所有这些,但我还没有发现所有jQuery函数,所以从我看到的唯一方法是模拟缓动,并在一个动画中完成所有操作。
我真的不想使用setInterval
并确定何时需要清除它以及计算每个缓动值,如果有一种简单的方法。
jQuery是否有某种空动画缓动,例如
$().css("height":starth+"px").animate({height:endh},{duration:300,
step:function(fn) {
// all the animation actions here via fn end value
}
});
提前致谢。
我需要的是 - 在代码中不是一个完全可行的解决方案,只是这些主题的一些启示:
是否有合法的方法为一组动画元素调用一个步骤函数,或者,当我在集合中使用一个step
时,它可能会调用.animate
一次。
如果有人对jquery如何处理多个.animate
有所了解,我会非常感激,它们会用在一个适用于.setInterval
的全局函数中吗?或者他们是否有大量的.setIntervals
等同于setTimeout(大多数浏览器无法大量处理);
有没有办法模拟动画&#39;缓和,一些函数名称可能,或者一个特殊的技巧来实现它(我唯一看到的是一个隐藏的元素或者&#39;属性可能会改变)
或者我应该学习一些有用的功能,这可以帮助我实现目标
答案 0 :(得分:0)
猜猜我几乎找到了问题的答案: http://james.padolsey.com/javascript/fun-with-jquerys-animate/
以下是上面链接中的空动画,其中包含具有所需值的1步功能,如果一切正常,将在稍后发布结果。
var from = {property: 0};
var to = {property: 100};
jQuery(from).animate(to, {
duration: 100,
step: function() {
console.log( 'Currently @ ' + this.property );
}
});
是的,这一切都很好,没有desynch,速度很快,因为只有1个动画,发现为动画创造了一个通用功能 - 浪费资源,所以它非常具体,但仍然是,这里是:
animate: function($obj) {
var T = this;
...
T.arr = new Array();
// gathering the array
$obj.each(function(i){
var size;
T.arr[i] = {obj:$(this), rest:$(this).getSibl(), cont:$(this).getCont()}
if($(this).hasClass("vert"))
{
size = "height";
T.arr[i].to = yto;
}
else
{
size = "width";
T.arr[i].to = xto;
T.arr[i].children = $(this).getChld();
}
T.arr[i].rest.each(function(){
$(this).attr("from",$(this)[size]());
});
});
// animating prop
jQuery({prop:0}).animate({prop:1}, {
duration: 300,
step: function() {
var i;
var P = this;
var newval;
var sum;
var size;
for(i = 0; i < T.arr.length; i++)
{
size = T.arr[i].obj.hasClass("vert") ? "height":"width";
sum = 0;
T.arr[i].rest.each(function(){
// new value of width/height, determined by the animation percentage
newval = parseInt($(this).attr("from")) + (T.arr[i].to-$(this).attr("from"))*P.prop;
$(this)[size](newval);
sum += newval;
});
T.arr[i].obj[size](T.arr[i].cont[size]()-sum);
}
}
});
},