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/

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