0

ここに問題があります.htmlブロックのツリー構造があり、グローバルコンテナは幅(X)と高さ(Y)が固定されています。レベル上のブロックの 1 つをクリックすると、他のすべてのブロックがある程度のサイズに縮小されますが、クリックされたブロックは残りのスペースに拡大され、サブレベルがその場所に表示されます。

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- 拡大したい 1 つのタブです。

主な問題は次のとおりです。深いレベルにあるタブを開くと、より高いレベルのすべてのタブをアニメーション化して、もう少し縮小する必要があるため、$objX と Y が変化するため、現在のアニメーションを使用する必要があります新しい値ですが、異なるレベルで 3 つの異なるアニメーションを呼び出すと、バグが発生します。より深いレベルのアニメーションの 1 つが 1 ステップ早く終了し、上のレベルのアニメーションがオブジェクトを 5 倍に拡大します。 -10 ピクセル増やせば、そのスペースが使い果たされることはありません。

2つ目の問題は、イージングと同時に約 50 個のオブジェクトをアニメーション化する必要があることです。これは少しやり過ぎです。

そして最後の問題は、上記のようにアニメーションでコールバックを呼び出すと、リスト内のすべてのタブに対して 1 つのステップが必要である一方で、コレクションのアニメーションごとに個別にstepステップを呼び出すという奇妙な感覚があります(不要なスクリプトを避けるため)。 )$tabs

それをすべて修正する他の方法があるかもしれませんが、私はまだすべてのjQuery関数を発見していないので、私が見る唯一の方法はイージングをシミュレートし、1つのアニメーションですべてを行うことです.

setInterval簡単な方法があれば、それをいつクリアする必要があるかを判断し、各イージング値を計算する必要はありません。

jQueryにはある種の空のアニメーションイージングがありますか?

$().css("height":starth+"px").animate({height:endh},{duration:300,
    step:function(fn) {

        // all the animation actions here via fn end value
    }
});

前もって感謝します。

私が必要としているのは、コードで完全に機能するソリューションではなく、それらの主題に関するいくつかの啓蒙です:

  1. アニメーション化された要素のコレクションに対して 1 つのステップ関数を呼び出す合法的な方法はありますか、それとも、コレクションでstep1 つを使用すると 1 回呼び出される可能性があり.animateます。

  2. jquery が multiple をどのように処理するかについて誰かが光を当てることができれば、本当に感謝してい.animateます.setInterval。または、setTimeout と同等のものを大量に持っているでしょうか.setIntervals(ほとんどのブラウザーでは大量に処理できません)。

  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つのアニメーションだけが、アニメーション用の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 に答える