JQuery水平手風琴橫幅絕對定位錯誤

Question

以下代碼運行基於JQuery的水平動畫系統。

$(document).ready(function(){ 
    maxWidth = 700; 
    minWidth = 65; 
    normWidth = 192; 

    var featspos = 0; 

    $('.featuredslider a').each(function(){ 
     $(this).css('left', featspos+'px'); 
     featspos += 192; 
    }); 

    $(".featuredslider a").mouseenter(function(){ 
     var featscur = $(this).index(); 
     $('.featuredslider a').each(function(){ 
      featspos = 0; 
      $(this).animate({left: featspos},800); 
      if($(this).index() == featscur){ featspos += 700 } else { featspos += 65; }; 
     }); 
    }); 
    $(".featuredslider a").mouseleave(function(){ 
     $(this).css('left', featspos+'px'); 
     featspos += 192; 
    }); 
}); 

有接縫是一個絕對定位的問題，因爲只要鼠標進入圖片中的任何一個都向左移動：0像素;此外，讓他們再次返回的功能也不起作用。他們只是坐在那裏0px;

我已經設置了一個引用FIDDLE，所以我希望這有助於解決問題。 http://jsfiddle.net/FzaxF/1/

Answer 1

我做了一些改動：http://jsfiddle.net/mblase75/FzaxF/6/

您曾在mouseenter事件的.each循環時，它應該是在mouseleave。我還在mouseleave事件開始時將featspos重置爲零，並添加了stop()以中斷動畫，前提是用戶在完成動畫之前將其刪除。

最後，重置圖像被移動到一個函數來消除一些冗餘代碼。

$(document).ready(function() { 
    maxWidth = 700; 
    minWidth = 65; 
    normWidth = 192; 

    function resetter() { 
     var featspos = 0; 
     $('.featuredslider a').each(function() { 
      $(this).stop().css('left', featspos + 'px'); 
      featspos += 192; 
     }); 
    } 
    resetter(); 

    $(".featuredslider a").mouseenter(function() { 
     var featscur = $(this).index(); 
     featspos = 0; 
     $(this).animate({ 
      left: featspos 
     }, 800); 
     if ($(this).index() == featscur) { 
      featspos += 700 
     } else { 
      featspos += 65; 
     }; 
    }); 
    $(".featuredslider a").mouseleave(function() { 
     resetter(); 
    }); 

});