Question

由于内容不同，我有3个下拉菜单（并排）导航，高度不同。

目前我已经开始工作，因此悬停时的每个下拉菜单都从0开始并动画到其高度。

我想通过记住当前高度来改善这一点，所以当鼠标悬停在下一个下拉列表时，它只会为不同的高度设置动画。

有人可以帮帮我吗？

这是我到目前为止所做的：

var expandLi = $('#header .nav .wrapper > ul > li.expand');

$(expandLi).hover(function(){       
    var startHeight = 0;
    var maxHeight = $(this).find('.expandPanel').height();
    $(this).find('.expandPanel').height(startHeight);       
    $(this).find('.expandPanel').animate({'height':maxHeight});
}, function(){ 
    $(this).find('.expandPanel').fadeOut();
});

Answer 1

不确定我明白了，但你不能加入到起点吗？

var expandLi = $('#header .nav .wrapper > ul > li.expand'), startHeight = 0;

$(expandLi).hover(function(){
    var elem = $('.expandPanel', this),
        maxHeight = elem.height();
    elem.height(startHeight).animate({'height':maxHeight}, 1000, function() {
        startHeight += maxHeight;
    });
}, function(){ 
    var elem = $('.expandPanel', this),
        maxHeight = elem.height();
    elem.fadeOut(1000, function() {
        startHeight -= maxHeight;
    });
});

Answer 2

您可以使用jquery“data”函数保存任何html标记的任何其他数据。例如：

$('#id').data('xxx', 123456);

我如何记住当前div高度并相应地设置下一个div高度的动画？

2 个答案: