Mất di chuột khi hoạt ảnh với jQuery (không di chuyển chuột)

Question

Tôi có hàng hình thu nhỏ này mà tôi đang làm động với jQuery.
Mỗi hình thu nhỏ này có lớp di chuột và hoạt động.

Chúng hoạt động tốt nhưng khi tôi tạo ảnh động cho danh sách, hình thu nhỏ mới bên dưới con trỏ chuột không áp dụng di chuột? Tôi phải di chuyển chuột một chút sau mỗi lần nhấp?

Đó là kinda khó exaplain .. Tôi đã thực hiện một fiddle đây: http://jsfiddle.net/nZGYA/
Khi bạn bắt đầu nhấn sau khi ngón tay cái 3 mà không cần di chuyển chuột mà bạn nhìn thấy những gì tôi có nghĩa là ...

Nó hoạt động tốt trong FireFox, KHÔNG Safari, Chrome, IE, v.v.
Có điều gì tôi có thể làm được không?

Để tham khảo ở đây là mã của tôi:

<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 liên kết MouseEnter() và MouseLeave() để đối tượng. Tôi nghĩ bạn sẽ có may mắn hơn với mouseOver() trong trường hợp này, mặc dù tôi chưa thử nó.

What is the difference between the mouseover and mouseenter events?

Answer 2

Tôi đã có một giải pháp mà làm việc trong Chrome và IE (chưa được thử nghiệm trong Safari). Về cơ bản, tôi kích hoạt sự kiện mouseover() của phần tử bên dưới chuột trong sự kiện gọi lại animate() nếu các hình thu nhỏ đã di chuyển. Giải pháp chỉ được thực hiện cho danh sách-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; 
}); 

Và đây là các liên kết đến ngã ba của tôi trong jsfiddle nếu bạn wan't để kiểm tra nó ra đằng kia - http://jsfiddle.net/jimmysv/3tzAt/15/

Answer 3

tôi chỉ làm việc trên danh sách top nhưng tôi nghĩ rằng tôi đã nhận nó tất cả làm việc. cho tôi biết nếu đó là những gì bạn đang tìm kiếm.

Đây là 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; 
});