Perder al pasar el ratón al animar con jQuery (sin mover el mouse)

Question

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 mousecursor no aplica el hover? Tengo que mover el mouse un poco después de cada clic?

Es un poco difícil de exaplain .. He hecho un violín aquí: http://jsfiddle.net/nZGYA/
Cuando empieza a hacer clic en el pulgar después de 3 sin mover el ratón se ve lo que quiero decir ...

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

Como referencia aquí es 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> 

Answer 1

Hover se une MouseEnter() y mouseLeave() para el objeto. Creo que tendrás mejor suerte con mouseOver() en este caso, aunque no lo he probado.

What is the difference between the mouseover and mouseenter events?

Answer 2

Tengo una solución que funciona en Chrome e IE (no se han probado en Safari). Básicamente, disparo el evento mouseover() del elemento debajo del mouse en el evento de devolución de llamada animate() si las miniaturas se han movido. La solución solo se implementa para la lista-1.

// list 1 
var idx = 0; 
$('#list-1 li').hover(function() { 
    $(this).addClass('hover'); 
}, function() { 
    $(this).removeClass('hover'); 
}).click(function() { 
    $('#list-1 > li').removeClass('active'); 
    var $active = $(this); 
    $active.addClass('active'); 
    var id = $('#list-1 li.active').data('index') - 2; // take scroll param and subtract 2 to keep selected image in the middle 

    var moveAmount = 90; 
    idy = Math.max(0, id * moveAmount); 
    var oldPos = $active.parent().position().top; 

    $active.parent().animate({ 
     'top': -idy + 'px' 
    }, function(){ 

     var newPos = $(this).position().top; 

     // Check if we moved 
     if(oldPos - newPos != 0) 
     { 
      var movement = (oldPos - newPos)/moveAmount; 
      $($(this).children()[$active.index() + movement]) 
       .trigger("mouseover"); 

     } 

    }); 
    return false; 
}).css('cursor', 'pointer').each(function() { 
    $(this).data('index', idx); 
    ++idx; 
}); 

Y aquí está el enlace a mi tenedor en jsFiddle si quieres probar para probarlo por allí - http://jsfiddle.net/jimmysv/3tzAt/15/

Answer 3

sólo trabajé en la lista superior, pero creo que lo tengo todo trabajo. avísame si es lo que estás buscando.

Aquí es el fiddler

var idx = 0; 
$('#list-1 li').hover(function() { 
    $(this).addClass('hover'); 
}, function() { 
    $(this).removeClass('hover'); 
}).click 

(function() { 
    var currentindex = $('.active').index(); 
    var selectedindex = $(this).index(); 
    var nexthoverindex = selectedindex + (selectedindex - currentindex); 


//counter for starting on index 1 
if(currentindex === 1 && selectedindex > 2){ 
    nexthoverindex = nexthoverindex - 1; 
} 

//counter for starting on index 0 
if(currentindex === 0 && selectedindex > 2){ 
    nexthoverindex = nexthoverindex - 2; 
} 

//make sure the selection never goes below 0 
if(nexthoverindex < 0){ 
    nexthoverindex = 0; 
} 

$('#list-1 > li').removeClass('active'); 
$(this).addClass('active'); 
var id = $('#list-1 li.active').data('index') - 2; // take scroll param and subtract 2 to keep selected image in the middle 
idy = Math.max(0, id * 90); 
$(this).parent().animate({ 
    'top': -idy + 'px' 
},200, function(){   
    $('.hover').removeClass('hover'); 
    if(currentindex > 2 || selectedindex > 2){ 
    $('#list-1 > li').eq(nexthoverindex).addClass('hover'); 
    } 
}); 
return false; 
}).css('cursor', 'pointer').each(function() { 
    $(this).data('index', idx); 
    ++idx; 
});