jquery - jQuery - 动画文本区域框高度 - 性能问题

Question

请记住，我仍处于 jQuery 的早期学习阶段。

下面的代码存在动画性能问题。它没有在 jsfiddle 中显示性能问题，但是在我正在构建 .js 文件的网站上，html 文件很大！

代码的目的是在焦点上为 textarea 高度设置动画，并将框模糊到原始高度。

我认为组合这些功能可能会提高性能，但情况恰恰相反。

$("#productsServiceDescription, #targetAudienceDescription").focus(function() {

    $(this).animate({
        height: 100
    }, "normal"),

    $(this).blur(function() {
        $(this).animate({
            height: 51
        }, "normal")
    });
});​    

代码在这里

http://jsfiddle.net/clearpixelsolutions/Yn477/

这是功能分离的代码，动画性能如此，但如上图所示组合起来很糟糕。

$("#productsServiceDescription, #targetAudienceDescription").focus(function() {

    $(this).animate({
        height: 100
    }, "normal"),
});
$("#productsServiceDescription, #targetAudienceDescription").blur(function() {

    $(this).animate({
        height: 51
    }, "normal")
});​

我想结合这些功能来消除复制 id 标签。使用此功能，我将总共有 15 个左右的 id。

我希望有人能告诉我我做错了什么以及如何优化代码。

Answer 1

Answer 2