Question

我有一些div .frame，高度为200px。当鼠标悬停在其中一个div上时，使用jQuery函数animate（），我将此div的高度设置为300px，当鼠标离开此div时，我将其高度重新设置为200px。 / p>

脚本非常基本：

$(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设置为原始高度？

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')});
    }  
});

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

Answer 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 });
    }  
});

Answer 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 ] } );
});

jQuery，获取div的原始高度

3 个答案: