animate expand on mouse enter, onmouse leave

by lovromar

HTML

<table>
    <tr>
        <td><div>1</div></td>
        <td><div>2</div></td>
        <td><div>3</div></td>
        <td><div>4</div></td>
    </tr>            
</table>

CSS

table { table-layout: fixed; border-collapse: collapse; margin: 20px; border: 1px solid blue; }
table td { width: 50px; height: 50px; position: relative; }
div { top: 0; width: 50px; height: 50px; position: absolute; border: 1px solid red; z-index: 1; }
div:hover { z-index: 2; }

JavaScript

$('table div')
    .on('mouseenter', function(){
        var div = $(this);
        div.stop(true, true).animate({ 
            margin: -10,
            width: "+=20",
            height: "+=20"
        }, 'fast');
    })
    .on('mouseleave', function(){
        var div = $(this);
        div.stop(true, true).animate({ 
            margin: 0,
            width: "-=20",
            height: "-=20"
        }, 'fast');
    })