addEvents, set

Tween easing. Set tween options. Mouseover on elements tweens them.

by andfinally

HTML

<ul>
    <li>Snake man</li>
    <li>Gemini man</li>
    <li>Shadow man</li>
    <li>Spark man</li>
</ul>

CSS

li
{
    display: block;
    width: 100px;
    margin: 10px;
    padding: 10px;
    border: 1px solid #eee;
    background: #f6f6f6;
}

JavaScript

window.addEvent('domready', function() {

    $$('li').addEvents({
        'mouseenter': bumpOut,
        'mouseleave': bumpBack
    });

});

var opts = {
    duration: 'short',
    transition: Fx.Transitions.Quad.easeInOut
};

function bumpOut() {
    this.set('tween', opts);
    this.tween('marginLeft', 50);
}

function bumpBack() {
    this.set('tween', opts);
    this.tween('marginLeft', 10);
}