Question

问题是，我有一个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;属性可能会改变）

或者我应该学习一些有用的功能，这可以帮助我实现目标

Answer 1

猜猜我几乎找到了问题的答案： 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);
            }
        }
    });
},

多个同时动画，模拟动画＆＃39;宽松和一步到位的＆＃39;呼吁jQuery集合

1 个答案: