jQuery - 动画 DIV 上的 Mouseout

Question

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

现在的问题是，在一切按比例放大后，不是在按比例放大的容器(高度:300px)的鼠标移出时缩小，而是在容器的原始高度(高度:100px)的鼠标移出后开始缩放，而不是新的。

代码如下:

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