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

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

不知道我明白了，但你不能只添加到 startheight 吗？

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“数据”功能为任何 html 标记保存任何附加数据。例如 ：

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