jQuery，获取div的原始高度

Question

我有一些高度为 200px 的 div .frame。当鼠标悬停在这些 div 之一上时，使用 jQuery 函数 animate()，我将此 div 的高度设置为 300px，当鼠标离开此 div 时，我将其高度重新设置为 200px。

脚本非常基本:

$(document).on('mouseenter mouseleave', '.frame', function( e ) {
    var el=$(this);
    if(e.type == "mouseenter"){
        el.stop(true,true).animate({'height':300});
    }else{
        el.stop(true,true).animate({'height':200});
    }  
});

我的问题是:从一开始我就知道.frame的高度是200px，但是如果我不知道这个值怎么办？如何在第二个 animate() 中将 .frame 设置为其原始高度？

Answer 1

工作示例 http://jsfiddle.net/FZXt9/8/

将高度保存为每个元素的数据。由于您使用 .on() 来选择运行此代码后可能创建的元素，这表明您正在动态创建 .frame 元素，因此在页面加载时设置变量不会工作。这也适用于多个元素。

$(document).on('mouseenter mouseleave', '.frame', function( e ) {
    var el=$(this);
    if(e.type == "mouseenter"){
        if (!el.data('originalheight')) el.data('originalheight', el.height()); // set the data
        el.stop().animate({height:300});
    }else{
        el.stop().animate({height:el.data('originalheight')});
    }  
});

请注意，我已将 #frame 更改为 .frame，使用类而不是 ID，因为 ID 必须是唯一的，并且您已经说过需要它来处理多个元素。