0

div#w_xxxとをdiv#w_xxx img同時にアニメートしたい。

それらは大きくなり、その後、元の幅と高さに戻るはずです。

問題は、mootools がすべてのアニメーションを同時に再生するため、アニメーションを見ること.chainができず、mootools のいくつかの機能を試してみましたが、うまくいきませんでした。

私のコードは次のようになります。

$("w_"+current_item+"").set('morph', {
            duration: 1000,
            transition: Fx.Transitions.Bounce.easeOut
        });
        $("w_"+current_item+"").morph({
                    'opacity': '1',
                    'width': 366,
                    'height': 240,
                    'z-index': '100'
        });

        $$("div#w_"+current_item+" img").set('morph', {
            duration: 1000,
            transition: Fx.Transitions.Bounce.easeOut
        });
        $$("div#w_"+current_item+" img").morph({
                    'opacity': '1',
                    'width': 366,
                    'height': 240,
                    'z-index': '100'
        });

        $("w_"+current_item+"").set('morph', {
            duration: 1000,
            transition: Fx.Transitions.Bounce.easeOut
        });
        $("w_"+current_item+"").morph({
                    'opacity': '1',
                    'width': 183,
                    'height': 120,
                    'z-index': '100'
        });

        $$("div#w_"+current_item+" img").set('morph', {
            duration: 1000,
            transition: Fx.Transitions.Bounce.easeOut
        });
        $$("div#w_"+current_item+" img").morph({
                    'opacity': '1',
                    'width': 183,
                    'height': 120,
                    'z-index': '100'
        });
4

1 に答える 1

1

Fx.ElementsMooTools-more: http://mootools.net/docs/more/Fx/Fx.Elementsから見てください。これは、統一されたタイマーで複数のアニメーションを実行するように設計されています。

http://jsfiddle.net/dimitar/tC4V4/

// mock your current_item... 
var current_item = 1;

var w = document.id("w_" + current_item);
new Fx.Elements($$(w, w.getElement("img")), {
    onComplete: function() {
        console.log("done");
    },
    duration: 4000,
    transition: Fx.Transitions.Bounce.easeOut,
    link: "chain"
}).start({
    0: {
        'opacity': '1',
        'width': 366,
        'height': 240,
        'z-index': '100'
    },
    1: {
        'opacity': '1',
        'width': 183,
        'height': 120,
        'z-index': '100'

    }   
}).start({
    0: {
        opacity: 0
    }  

});

同様に、link: chain をサポートしているため、連鎖させたり、待機させたりすることができます。

于 2011-11-22T15:49:43.670 に答える