Mootools 1.3.1：链接动画和动画2个元素同步

Question

我想动画div#w_xxx和div#w_xxx img在同一时间。

他们应该变大，之后他们应该达到他们的旧宽度和高度。

问题是，mootools在同一时间播放所有的动画，所以我不能看到动画，我试着从mootools的.chain函数，但我没有得到它的工作。

我的代码如下所示：

$("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' 
     }); 

Answer 1

你应该看看Fx.Elements从MooTools的-更多：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 
    } 

}); 

同样的道理，它支持链接：链，使您可以链的东西，或等待等