jQuery，获取一个div的原始高度答案

【问题标题】：jQuery, get the original height of a divjQuery，获取一个div的原始高度
【发布时间】：2014-01-19 04:41:48
【问题描述】：

我有一些高度为 200 像素的 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，但是如果我不知道这个值怎么办？如何在 seconde animate() 中将 .frame 设置为其原始高度？

【问题讨论】：

你会为多个元素这样做吗？它稍微改变了答案。
是的，对于不止一个元素，我正在编辑我的帖子
您只能拥有一个具有该 ID 的元素，因此代码暗示只有一个元素。
如何将元素插入到 DOM 中？您必须在插入元素时为其添加一个属性才能获得原始高度
@adeneo CSS 可能正在控制高度。需要添加什么属性？

标签： jquery jquery-animate height mouseover

【解决方案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 必须是唯一的，并且您说过您需要它来处理多个元素。

【讨论】：

我的帖子也差不多，但没有办法在元素上设置数据属性，这没什么用。
@adeneo 数据只是 DOM 准备好之前的一个属性。之后，它被存储在一个对象中。 “没有办法设置数据”是什么意思？
如何存储数据不是问题，存储与不存在的元素相关的数据。
数据存储在 mouseenter 上。元素存在。您是否将我的答案与其他两个不考虑这一点的答案之一混淆了？
感谢@Popnoodles 我做了一个 jsFiddle，但它似乎不起作用：jsfiddle.net/malamine_kebe/FZXt9/2 当鼠标离开 div 时，它也在改变 originalheight 否？

【解决方案2】：

也许您可以先缓存 div 的高度，然后在 mouseleave 中使用它：

var eleheight = $('#frame').height();

$(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': eleheight });
    }  
});

【讨论】：

我想到了，但实际上我需要随机数的 div 上的脚本，而不仅仅是一个，所以我不知道为每个单个 div 设置一个变量是否是一个好的解决方案
这可能有问题。 OP 正在使用 .on() 之类的 .live() ，因此当您的代码运行时该框架可能不存在

【解决方案3】：

解决此问题的一个有趣方法是将任意 data 存储为具有“mouseenter”和“mouseleave”属性的对象：

$( '.frame' ).each( function() {
    $(this).data( 'height', { 'mouseenter': 300, 'mouseleave': $(this).height() } );
});

，然后只使用事件的名称：

$(document).on('mouseenter mouseleave', '.frame', function( e ) {
    $(this) .stop(true,true)
            .animate( { height: $(this).data( 'height' )[ e.type ] } );
});

【讨论】：