jQuery के साथ एनिमेट करते समय होवर खोना (माउस को घुमाने के बिना)

Question

मेरे पास थंबनेल की यह पंक्ति है कि मैं jQuery के साथ एनिमेट कर रहा हूं।
इनमें से प्रत्येक थंबनेल में एक होवर और सक्रिय कक्षा है।

वे ठीक काम करते हैं लेकिन जब मैं सूची चेतन, mousecursor के तहत नई झलक मंडराना लागू नहीं होता? मुझे प्रत्येक क्लिक के बाद माउस को थोड़ा सा स्थानांतरित करना होगा?

यह exaplain करने के लिए एक बेला यहाँ .. मैं बना दिया है थोड़े मुश्किल है: http://jsfiddle.net/nZGYA/
जब आप माउस जैसा कि आप देख मैं क्या मतलब ले जाए बिना अंगूठे 3 के बाद क्लिक करने शुरू ...

यह फ़ायर्फ़ॉक्स में ठीक काम करता है, सफारी, क्रोम, आईई आदि नहीं
क्या मैं इस बारे में कुछ कर सकता हूं?

<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

होवर बांधता mouseenter() और mouseleave() वस्तु के लिए:

संदर्भ यहाँ के लिए मेरे कोड है। मुझे लगता है कि इस मामले में माउसओवर() के साथ आपको बेहतर भाग्य मिलेगा, हालांकि मैंने कोशिश नहीं की है।

What is the difference between the mouseover and mouseenter events?

Answer 2

मैं एक समाधान है कि क्रोम और IE (सफारी में परीक्षण नहीं किया) में काम करता है मिल गया है। मूल रूप से जब मैं थंबनेल स्थानांतरित हो जाता हूं तो एनिमेट() कॉलबैक ईवेंट में माउस के नीचे माउस के तत्व के माउसओवर() ईवेंट को ट्रिगर करता हूं। समाधान केवल सूची -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; 
}); 

और यहाँ आप वहाँ पर इसे बाहर का परीक्षण करने के लिए wan't अगर jsfiddle में मेरे कांटा के लिए लिंक है - http://jsfiddle.net/jimmysv/3tzAt/15/

Answer 3

मैं केवल शीर्ष सूची पर काम किया, लेकिन मैं मैं यह सब काम कर मिल गया लगता है। अगर आप यही चाहते हैं तो मुझे बताएं।

यहाँ 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; 
});