0

这是问题所在，我有一个 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- 是我要放大的一个选项卡

主要问题是：当我打开一个更深层次的选项卡时，我必须为更高层次的所有选项卡设置动画以缩小一点，因此$objX 和 Y 会改变，所以当前动画必须使用新值，但是如果我在不同级别调用 3 个不同的动画，我一定会遇到错误，当更深级别的动画之一提前完成 1 步时，而上一级的动画会将对象放大 5 -10 更多像素，并且该空间不会被用完。

第二个问题是必须有大约 50 个对象同时使用缓动进行动画处理，这有点矫枉过正。

最后一个问题是当我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. 有没有办法模拟“动画”缓动，可能是一些函数名称，或者实现这一点的特殊技巧（我唯一看到的是隐藏元素或“窗口”属性可能会改变）

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

4

1 回答 1

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 );
    }
});

是的，这一切都很好，没有不同步，而且速度很好，因为只有 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);
            }
        }
    });
},
于 2013-01-18T16:36:05.777 回答