使用jQuery更改菜單選項寬度

Question

我的主頁上有一個菜單，在懸停時我希望它們能夠放大。 這正是我所取得的成就，除了有一個缺陷：

當我在動畫結束前離開時，該選項會停止動畫並從上一個動畫中剩下的寬度中減去30。 所以它總是與其他動畫相交並導致錯誤的結果。

例：

我快速移動到菜單選項1，它只會擴大一點 - 讓我們說10px - 當我在它上面時，當我移開寬度減少30px，這比之前移動的10px更多，這導致一個更小的按鈕總體。

我想以某種方式捕獲它在鼠標懸停動畫期間移動了多少，並且只減少了離開函數中的寬度。 或者，當然還有其他一些簡單的解決方案，如果有的話......

這是代碼：

    $('.menu_option').hover(

        function() {

            var w = $(this).width()+30+"";
            $(this).stop().animate({ width:w}, 150, 'easeOutQuad');

        }, function() {

                var w = $(this).width()-30+"";
                $(this).stop().animate({ width:w}, 150, 'easeOutQuad');

        });

Answer 1

您需要在計算寬度之前完成上一個動畫

$('.menu_option').hover(function () {
    var $this = $(this).stop(true, true);
    var w = $this.width() + 30;

    $this.animate({
        width: w
    }, 150, 'easeOutQuad');
}, function () {
    var $this = $(this).stop(true, true);
    var w = $this.width() - 30 + "";

    $this.animate({
        width: w
    }, 150, 'easeOutQuad');
});

演示： 小提琴

Answer 2

你可以做的是制作另一個變量，它是原點寬度然后當你把它放回原點：

JS：

var o = $('.menu_option').width();
$('.menu_option').hover(function () {

    var w = $(this).width() + 30 + "";
    $(this).stop().animate({
        width: w
    }, 150, 'easeOutQuad');
}, function () {
    $(this).stop().animate({
        width: o
    }, 150, 'easeOutQuad');
});

http://jsfiddle.net/Hive7/qBLPa/6/