Jquery動畫寬度手風琴風格橫幅

Question

我建立了這個簡單的手風琴風格橫幅。這是它應該做的：

• 抓鬥<li>包含選定的圖像<ul>。
• 除以他們的容器（div.banner）
• 開「的mouseenter」內平均，加.active類到盤旋<li>
  • 收縮另一<li>小號寬度（半它們的原始寬度）。
  • 放大活躍<li>到新的寬度（減半後的其他剩餘）
• 在「鼠標離開」，一切迴歸到原來的寬度。

工作正常，直到你快速滑過多個窗格。如果你這樣做，最後浮動的<li>的突破下一行。看起來窗格的總寬度超過了它們的容器。

動畫時舍入錯誤？它是否與動畫默認的「擺動」緩動有關？

小提琴：http://jsfiddle.net/UNFc4/

var banner = $('.banner'); 
var list_items = banner.find('li'); 
var banner_width = $(banner).width(); 
var num_of_images = $(banner).find('li').length; 
var original_width = banner_width/num_of_images; 
var half_width = (banner_width/num_of_images)/2; 

var init = function() { 
    $(list_items).css('width', original_width); 

    $(list_items).on('mouseenter', function() { 
     $(this).addClass('active'); 
     doAnimation(); 

    }); 
    $(list_items).on('mouseleave', function() { 
     resetAnimation(); 
     $(this).removeClass('active'); 
    }); 
} 
var doAnimation = function() { 
    $(list_items).not(".active").stop().animate({ 
     width: half_width + "px" 
    }, 500); 

    $(".active").stop().animate({ 
     width: (original_width + (half_width * (num_of_images - 1))) + "px" 
    }, 500); 
} 
var resetAnimation = function() { 
    $(list_items).stop().animate({ 
     width: original_width + "px" 
    }, 500); 
} 
init(); 

我可以通過改變這一行，減緩了其他人的動畫，讓事情的時間等於出解決它。但是，我寧願解決這裏發生的事情，希望更多地瞭解jQuery的animate（）如何工作。

$(list_items).not(".active").stop().animate({ 
     width: half_width + "px" 
    }, 480); // changed 500 to 480 

Answer 1

對於那些有興趣的人，我意識到我只需要在橫幅區域重置。如上所述，現在它的工作原理沒有了所有的抖動和隨後的佈局錯位。

新小提琴：http://jsfiddle.net/UNFc4/1/

$(list_items).on('mouseenter', function() { 
     $(this).addClass('active'); 
     doAnimation(); 
    }); 
    $(list_items).on('mouseleave', function() { 
     $(this).removeClass('active'); 
     doAnimation(); 
    }); 
    $(banner).on('mouseleave', function() { 
     resetAnimation(); 
    });