Question

Please keep in mind I’m still in the early learning stage of jQuery.

Having animation performance issue with the code below. It doesn’t show performance issues in jsfiddle but on the website I’m constructing the .js file and html file is huge!

The purpose of the code is to animate a textarea height on focus and blur the box to the original height.

I thought combining the functions might increase performance but the opposite happened.

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

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

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

Code Here

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

Here’s the code with functions separated, performance is so so on the animation, but combined like shown above its awful.

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

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

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

I was wanting to combine the functions to eliminate reproducing the id tags. I will have a total of 15 ids or so using this function.

I’m hoping someone might tell me what I’m doing wrong and how to optimize the code.

Answer 1

Using class will be better solution, like

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

See the updated demo​