使用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');
});

演示：Fiddle

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/