多个同步动画，模拟'animate'缓速和一步'调用jQuery集合

Multiple simultanous animations, simulation of 'animate' easing and one 'step' call for a jQuery collection

本文关键字：集合 jQuery 调用 一步 动画 同步 模拟 animate      更新时间：2023-09-26

这就是问题所在，我有一个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会改变,所以当前动画必须使用新值,但是如果我打电话给三个不同的动画不同级别我一定会得到一个错误,当的一个动画在更深的层面上,完成早1步骤,而上面的水平,将放大的对象通过5 - 10像素空间不会被用完。第二个问题是必须同时有大约50个带有easing的对象动画，这有点过度了。

和最后一个问题是当我在动画上调用step回调时，如上所示，我有一种奇怪的感觉，它为$tabs集合的每个动画分别调用步骤，而我需要1步骤列表中的所有选项卡(以避免不必要的脚本)

可能有一些其他的方法来解决所有这些问题，但我还没有发现所有的jQuery函数，所以从我看到的唯一的方法是模拟舒缓，并在一个动画中完成所有的事情。

如果有一个简单的方法，我真的不想使用setInterval并确定何时需要清除它并计算每个缓和值。

jQuery是否有一些空的动画缓动，例如

$().css("height":starth+"px").animate({height:endh},{duration:300,
    step:function(fn) {
        // all the animation actions here via fn end value
    }
});

提前感谢。

我需要的-不是一个完全工作的解决方案的代码，只是一些启示在这些主题:

  1. 是否有一种合法的方法来调用一个步骤函数的动画元素的集合，或者，也许，它调用step一次，当我使用一个.animate的集合

  2. 如果有人能阐明jquery如何处理多个.animate，他们会在.setInterval上工作的一个全局函数中使用吗?或者他们会有大量的.setIntervals，相当于setTimeout(大多数浏览器无法处理大量);

  3. 是否有一种方法来模拟'animate' easing，一些函数名也许，或者一个特殊的技巧来实现这一点(我唯一看到的是一个隐藏的元素或'window'属性可能会改变)

或者一些我应该学习的函数的定向推送，这可以帮助我实现我的目标

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

是的，这一切都很好，没有同步，而且速度很快，因为只有一个动画，发现为动画制作一个通用功能-浪费资源，所以它是相当具体的，但仍然是:

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);
            }
        }
    });
},
相关文章：