0

我的主页上有一个菜单，悬停时我希望它们放大。这正是我所取得的成就，除了有一个缺陷：

当我在动画结束前离开时，该选项会停止动画并从前一个动画离开的宽度中减去 30。所以它总是与其他动画相交并导致错误的结果。

例子：

我快速移动到菜单选项 1，它只扩展了一点点 - 比如说 10 像素 - 当我在它上面时，当我离开时，宽度减少了 30 像素，这比之前移动的 10 像素多，这导致了一个更小的按钮全面的。

我想以某种方式捕捉它在鼠标悬停动画期间移动了多少，并且只将离开函数中的宽度减小了那个量。或者，当然还有其他一些简单的解决方案，如果有的话......

这是代码：

    $('.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');

        });
4

2 回答 2

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

演示：小提琴

于 2013-08-29T16:16:42.843 回答
1

您可以做的是制作另一个变量，即原点宽度，然后当您将其放回原点时：

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/

于 2013-08-29T16:19:17.053 回答