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

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

在对元素执行动画之前，您可能想要检查所述元素是否已经被动画化。您可以使用此代码

来完成此操作

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

希望这可以帮到你

Answer 2

您可能需要使用on事件来获取处于已更改状态的“live”.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/

jQuery - 动画DIV上的Mouseout

2 个答案: