Mootools 1.3.1：使用 fx.morph 不起作用？答案

【问题标题】：Mootools 1.3.1: using fx.morph not working?Mootools 1.3.1：使用 fx.morph 不起作用？
【发布时间】：2011-11-21 21:58:42
【问题描述】：

我正在使用 Mootools 1.3.1，我想使用 fx.morph 为 div 设置动画，但在浏览器调试控制台中我得到了

TypeError: Result of expression 'c' [null] is not an object.#
mootools-core-1.3.1.js:394

我没有构建 mootools 脚本，但我必须使用此版本使用 mootools 添加更多动画和功能。

我的脚本如下所示：

var myEffect = new Fx.Morph("div.tile", {
duration: 'short',
transition: Fx.Transitions.Sine.easeOut
});

myEffect.start({
'height': 100, // Morphs the height from the current to 100px.
'width': 300   // Morphs the width from the current to 300px.
});

【问题讨论】：

标签： javascript css animation mootools

【解决方案1】：

文档： http://mootools.net/docs/core/Fx/Fx.Morph

morph 方法的第一个参数是“元素”（对象）或元素的 id，您传递的是选择器.. 所以“div.tile”不起作用。

您需要为您的元素添加一个 id 或使用 each() 方法为所有具有“tile”类的元素添加效果

测试示例：http://jsfiddle.net/AGVwh/（在 Mootools 1.2.5 和 1.3.2 上测试，因此它应该也适用于 1.3.1）

希望对你有帮助

【讨论】：

此外，将选择器传递给$$()，即new Fx.Morph($$("div.tile"), ...)，应该可以解决问题，而无需向元素添加id 属性。
谢谢，帮了我很多。但是 jquerys 选择器引擎要好得多 mootools 的文档是如此无法使用 =( 我也可以为 z-index 设置动画吗？我可以选择#id img 吗？
+1 用于发现这一点。 OP：实际上，mootools 使用的选择器是 W3C CSS-level3 + extras（反向组合器）。 mootools 不需要复制文档，除非它与预期的标准不同。另外，您应该查找 el.set("morph") 和 el.get("morph") 和 el.morph({someobj})
@FrédéricHamidi 嗯实际上没有。如果你传递一个元素数组jsfiddle.net/AGVwh/1，它不会起作用，如果你想将变形应用于多个元素，你需要每个方法
谢谢，但像 $$("id img").morph() 这样的东西似乎在我的脚本中不起作用？ =(