Search code examples
css-transitionsmootools

MooTools 1.1: make a setstyle function transition smoothly

So I've got this working so far:

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

really simple, and works fine; basically slides a div to the left. But I'm trying to make it transition smoothly instead of immediately. I know it would be really simple to use tween or morph with MooTools 1.2, but I have to use version 1.1 for this project.

Solution

  • You can use 

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

    Demo: 

    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/

    P.S. this MooTools version is REALLY old, you should upgrade and/or tell to the boss to upgrade.