MooTools 1.1：使setstyle功能平滑过渡

Question

到目前为止，我已经完成了这个工作：

<script type="text/javascript"> 
    window.addEvent('domready', function() {
        $('casestudies').addEvent('click', function( ){
            $('gomobileinfo').setStyle('margin-left', '-500px');
        });
    });
</script>

非常简单，并且工作正常；基本上是向左滑动一个div。但我正在努力让它顺利过渡，而不是立即过渡。我知道在 MooTools 1.2 中使用 tween 或 morph 非常简单，但我必须在这个项目中使用 1.1 版本。

Answer 1

您可以使用

new Fx.Style('gomobileinfo', 'margin-left', {duration : 2000}).start(-500);

演示：

new Fx.Style('gomobileinfo', 'margin-left', {duration : 2000}).start(-500);

#gomobileinfo{
    width:100px;
    height:200px;
    background:red;
    margin-left:500px;
}

<script src="http://cdn.strategiqcommerce.com/ajax/libs/mootools/1.1.2/mootools-yui-compressed.js"></script>
<div id="gomobileinfo">Go Mobile</div>

http://jsfiddle.net/A5fVx/

PS 这个 MooTools 版本真的很旧，您应该升级和/或告诉老板升级。