1

yui3 で複数のアニメーションを同期させて一緒に進行させることはできますか? jquery 1.4ロードマップで言及され、この例http://ejohn.org/files/syncで示されているものに似たもの。

4

2 に答える 2

3

私は SO に関する質問への非回答を見つけるのが嫌いなので、参加したいと思いました。

バグレポートの情報のおかげで、これを理解しました（http://yuilibrary.com/projects/yui3/ticket/2528886）

これが私が持っていたものです：2つの箱が並んでいます。左のボックスを（幅方向に）縮小し、同時に右のボックスを拡大したかったのです。

(少し前に行ったいくつかの不幸な決定のために、float:left/float right および overflow:hidden で div を使用しますが、これは他のほとんどの構成で機能するはずです。)

これが私がしたことです：


var anim = new Y.Anim({
        duration: 1.0
});

var elmLeftBox = Y.one('#leftBox');
var elmRightBox = Y.one('#rightBox');

var intWidth = parseInt(elmLeftBox.getComputedStyle('width'), 10);

anim.on('tween', function(e) {
    var elapsedTime = this.get('elapsedTime');
    var duration = this.get('duration');
    var easing = this.get('easing');

    var leftPos = easing(elapsedTime, intWidth, (-1 * intWidth), duration*1000);
    var rightPos = easing(elapsedTime, 0, intWidth, duration*1000);
    elmLeftBox.setStyle('width', leftPos);
    elmRightBox.setStyle('width', rightPos);
});

anim.on('end', function(evt) {
    //clean up after myself - don't want hardcoded widths
    elmLeftBox.setStyle('width', 0);
    elmRightBox.setStyle('width', '100%');
});

anim.run();

完璧に動作します。幸運を！

于 2010-12-23T18:52:30.460 に答える