jQuery - 动画 DIV 上的鼠标悬停

Question

我正在尝试在 jQuery 中组合我自己的动画下拉菜单，但结果很奇怪。我有一个包含按钮 DIV 和菜单 DIV 的容器，其想法是（在鼠标悬停时）容器 DIV 和菜单 DIV 都按高度缩放，菜单 DIV 获得 CSS {'display', 'block'}。在容器 DIV 的鼠标移出（它应该已经缩放高度以包含按钮和菜单 DIV）我希望 DIV 缩放回它们的原始高度和菜单 DIV 以获得 CSS {'display','none '}。

现在的问题是，在所有内容都放大之后，不是在按比例放大的容器（高度：300 像素）的鼠标移出时缩小，而是在鼠标移出容器的原始高度（高度：100 像素）之后开始缩放，而不是新的。

代码如下：

$('.container').mouseover(function(){
    $('.bob').css('display','block');
    $('.bob').animate({height: '200px'});
    $(this).animate({height: '300px'});
});

$('.container').mouseout(function(){
    $('.bob').animate({height: '0'},
            function(){
            $('.bob').css('display','none');
            });
    $(this).animate({height: '100px'});
});

Answer 1

您可能需要使用 on 事件来获取处于更改状态的“实时” .container 元素。 我还添加了 stop() 函数来停止动画，以防在您再次鼠标移出/鼠标悬停之前它还没有完成。

$(document).on('mouseover', '.container', function(){
    $('.bob').css('display','block');
    $('.bob').stop(true, false).animate({height: '200px'});
    $(this).stop(true, false).animate({height: '300px'});

});



$(document).on('mouseout', '.container', function(){
    $('.bob').stop(true, false).animate({height:0},
         function(){
            $('.bob').css('display','none');
         });
    $(this).stop(true, false).animate({height: '100px'});
});

编辑：这里要求解释：

这就像在 JQuery 中使用（现已弃用）的 live() 函数，它侦听更改的 dom 元素，甚至是稍后由 js 添加到 dom 的元素。如果你只使用 $('.container').mouseover() 它会在页面加载时监听 dom 元素的状态——只有 100px 高。它不会“意识到”元素已更改。

有停止功能，以便在新动画开始之前停止当前正在进行的元素动画。

http://api.jquery.com/on/

http://api.jquery.com/stop/

Answer 2

我不知道这是否对您有所帮助，但它解决了我的许多 JQuery 动画问题。

在对元素进行动画处理之前，您可能需要检查该元素是否已经被动画化。您可以使用此代码完成此操作

if( $(elem).is(':animated') ) {...}

希望对你有帮助