Tengo esta fila de miniaturas que estoy animando con jQuery.
Cada una de estas miniaturas tiene una clase activa y activa.

Funcionan bien, pero cuando animo la lista, la nueva miniatura debajo del cursor del mouse no aplica el desplazamiento. ¿Tengo que mover el mouse un poco después de cada clic?

Es un poco difícil de explicar. He hecho un violín aquí:http://jsfiddle.net/nZGYA/
Cuando comienzas a hacer clic después del pulgar 3 sin mover el mouse, ves lo que quiero decir ...

Funciona bien en Firefox, NO Safari, Chrome, IE, etc.
¿Hay algo que pueda hacer al respecto?

Para referencia aquí está mi código:

<style type="text/css">
    .container { position: relative; overflow: hidden; width: 140px; height: 460px; float: left; margin-right: 100px; background: silver;  }            
    ul { position: absolute; top: 10; list-style: none; margin: 10px; padding: 0; }
    li { margin-bottom: 10px; width: 120px; height: 80px; background: gray; }
    #list-2 li a { display: block; width: 120px; height: 80px; outline: none; }
    #list-2 li a:hover { background: teal; }
    #list-2 li a.active { background: navy; }
</style>

$(document).ready(function() {
    var idx_2 = 0;
    $('#list-2 li a')
    .click(function() {
        $('#list-2 > li a').removeClass('active');
        $(this).addClass('active');         
        var id =  $('#list-2 li a.active').data('index') - 2;
        idy = Math.max(0, id * 90);
        $(this).parent().parent().animate({ 'top' : -idy + 'px' });
        return false;
    })
    .each(function() {
        $(this).data('index', idx_2);
        ++idx_2;
    });
});

<div class="container">
    <ul id="list-2">
        <li><a class="active" href="#"></a></li>
        <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
        <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
        <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
        <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
        <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
        <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
    </ul>
</div>