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

使用class将是更好的解决方案，比如

$(".one_full_a3 textarea").focus(function() {
    $(this).animate({
        height: 100
    }, "normal");
}).blur(function() {
    $(this).animate({
        height: 51
    }, "normal");
});

See the updated demo

Answer 2

你看过http://jquerypp.com/了吗？这个jQuery插件扩展了jQuery的animate功能，支持在受支持的浏览器上支持CSS3。在嵌入jQuery之后，只需将脚本嵌入到行中，然后放松，查看流畅的动画：）

jQuery - 动画textarea框高度 - 性能问题

2 个答案: