Question

我有一个响应调整大小的菜单，因此div（#menuWFhover）的内容会随每个调整大小重新排列，因此div根据窗口大小具有不同的高度。

当我使用jQuery slideDown/Up时，它第一次工作正常，但在调整大小后div保持上一个动画的高度。这是因为slideDown以高度来播放动画吗？这是我正在使用的简化版本。如果我替换/添加(windows)resize（这是我的猜测，它与它有关）动画不会发生，但我可能做错了。

$(document).ready(function(){
        var WFover = function () {
            $('#menuWFhover').stop().slideDown(300);
        };
        var WFout = function () {
            $('#menuWFhover').stop().slideUp(300);
        };

        $('#menuNewBox').mouseover(WFover);
        $('#menuWFhover').mouseover(WFover);
        $('#menuNewBox').mouseout(WFout);
        $('#menuWFhover').mouseout(WFout);
});

Answer 1

作为ComputerArts mentioned，问题是jQuery在完成动画后显式设置了div的高度。然后，即使在CSS中调整div的大小，它也会重新使用此显式高度。

当然，现在，你可能应该使用CSS动画来做这种事情（见http://addyosmani.com/blog/css3transitions-jquery/）

如果你需要一个jQuery解决方案，你可以在动画完成后强制高度未定义，以便jQuery获取当前的CSS高度。虽然，这会略微改变行为：

演示： http://jsfiddle.net/brianpeiris/8zc5g/show

$(document).ready(function(){
        var WFover = function () {
            $('#menuWFhover').stop().slideDown(600), function () {
                $('#menuWFhover').height(''); 
            });
        };
        var WFout = function () {
            $('#menuWFhover').stop().slideUp(600), function () {
                $('#menuWFhover').height(''); 
            });
        };

        $('#menuNewBox').mouseover(WFover);
        $('#menuWFhover').mouseover(WFover);
        $('#menuNewBox').mouseout(WFout);
        $('#menuWFhover').mouseout(WFout);

    $(window).resize(function () {
        $.removeData($('#menuWFhover')[0], 'fxshow', true);
    });
});

jQuery slideDown / Up和响应式设计

1 个答案: