1

我有一个响应式调整大小的菜单,因此#menuWFhover每次调整大小都会重新排列 div ( ) 的内容,因此 div 的高度取决于窗口大小。

当我使用 jQueryslideDown/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);
});
4

1 回答 1

5

正如ComputerArts 提到的,问题在于 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);
    });
});
于 2012-09-06T04:16:48.040 回答