Question

我的表单中有一个<textarea>元素，并附有此代码：

$('#links').focusin(function() {
    $('#links').animate({
        height: '100px'
    }, 300, function() {
        // done
    });
});

这非常有效，当文本区域获得焦点时，它的高度会很好地增加到100px。现在，我希望它在失去焦点时根据其中的文本缩小到合适的大小。我写了这个：

$('#links').focusout(function() {
    $('#links').animate({
        height: 'auto'
    }, 300, function() {
        // done
    });
});

但它不起作用，只是保持在同一高度（100px）。有没有办法做到这一点？

感谢。：）

编辑：为了节省一些混淆，$('#links').focusout的偶数处理程序工作正常，这是我测试的第一件事。所以我认为这是动画或CSS属性的问题。

Answer 1

尝试使用$( '#links' ).blur( function(){ ... } )

http://api.jquery.com/blur/

编辑，您的实际代码：

$('#links').blur(function() {
$('#links').animate({
    height: 'auto'
}, 300, function() {
    // done
});
});

其他一些注释..你可以使用$（'＃links'）。focus（）而不是focusin，而且，一旦你进入函数，你可以使用$（this）.animate（），as捷径。只是一些小技巧和诸如此类的东西。

Answer 2

auto_height_link = $( '#links' ).css('height');
$('#links').focusin(function() {
    $(this).animate({
        height: '100px'
    }, 300, function() {
        // done
    });
}).focusout(function() {
    $(this).animate({
        height: auto_height_link
    }, 300, function() {
        // done
    });
});

但是无论如何，animate没有读取高度的css值auto

我偶然发现了http://www.unwrongest.com/projects/elastic/这就是你需要的东西

Answer 3

这与你正在做的事情并不完全相同，但非常相似：http://james.padolsey.com/javascript/jquery-plugin-autoresize/

Answer 4

你不能在jQuery中使用auto来制作动画。您应该将其设置为auto，然后获取实际高度（以px为单位）并最终为其设置动画。

看看here

使用jQuery基于文本区域内的文本设置文本区域的高度

4 个答案: