Imágenes cambiantes

[Lindir]

Hola,

estoy intentando programar una pequeña aplicación web y me he quedado atascado en un punto. A ver si me podéis echar una mano. Tengo una lista con 4 imágenes. Quiero que cuando el ratón pose encima de una, se haga más grande que las demás. Quiero que se mantenga grande hasta que pose el ratón en otra de las imágenes y así consiga que la anterior vuelva a su estado inicial y la nueva se haga grande. Y así sucesivamente con todas. Si posiciono el ratón en cualquier sitio de la ventana que no tenga imagen, se mantendrá en grande la última que se ha quedado en grande.

Con el código que tengo, cuando pongo el ratón encima de una imagen consigo que se haga grande pero en cuanto quito el ratón vuelve a ser pequeña. Este es mi código:

Código Javascript:

<script type="text/javascript"> 
$(document).ready(function(){
//Larger thumbnail preview 
$("ul.thumb li").hover(function() {
    $(this).css({'z-index' : '10'});
    $(this).find('img').addClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width: '120px',
            height: '120px', 
        }, 300); 
    
    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).find('img').removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width: '100px' , 
            height: '100px', 
            padding: '5px'
        }, 300); /*velocidad de outfocus*/
});
 
});
</script>
 

Y aquí la lista de imágenes:

Código HTML:

<ul class="thumb">
    <li><a href="#"><img src="images/thumb1.jpg" alt="" /></a></li>
    <li><a href="#"><img src="images/thumb2.jpg" alt="" /></a></li>
    <li><a href="#"><img src="images/thumb3.jpg" alt="" /></a></li>
    <li><a href="#"><img src="images/thumb4.jpg" alt="" /></a></li>
    
</ul>
 

Muchas gracias y un saludo!