mootools 1.2.2 Fx.Morph

!---->

The always requested hover transition

• option 1
• option 2
• option 3
• option 4
• option 5
• option 6
• option 7
• option 8
• option 9
• option A
• option B
• option C
• option D
• option E
• option F

 

!--<script src="http://mootools.net/download/get/mootools-1.2.2-core-yc.js"></script>-->
<!--<script src="a.js"></script>-->

<style>
#idList {
    margin: 0;
    padding: 0;
}
 
#idList li {
    display: block;
    margin: 0;
    padding: 4px;
    width: 120px;
    background: #333;
    color: #888;
}
</style>
<h3>The always requested hover transition</h3>
<ul id="idList">
    <li>option 1</li>
    <li>option 2</li>
    <li>option 3</li>
    <li>option 4</li>
    <li>option 5</li>
    <li>option 6</li>
    <li>option 7</li>
    <li>option 8</li>
    <li>option 9</li>
    <li>option A</li>
    <li>option B</li>
    <li>option C</li>
    <li>option D</li>
    <li>option E</li>
    <li>option F</li>
</ul>
<script defer=defer>
var list = $$('#idList li');
list.each(function(element) {
 
    var fx = new Fx.Morph(element, {duration:200, wait:false});
 
    element.addEvent('mouseenter', function(){
        fx.start({
            'margin-left': 5,
            'background-color': '#666',
            color: '#ff8'
        });
    });
 
    element.addEvent('mouseleave', function(){
        fx.start({
            'margin-left': 0,
            'background-color': '#333',
            'color': '#888'
        });
    });
 
});
 
</script>