Question

I have an animation function that will happen everytime a bunch of buttons are clicked, they’ll all each have something specific happen, but the animation will happen everytime. Right now I have it set up so it’s part of the click, so I’ve redefined each time, how do I set it up once and then for each button just say run that function when clicked?

right now it’s set up as this:

$("#animation1").click(function() {
$("#clinic_850_CONTAINER").animate({
    height: box_TOTAL_ht + 20
}, 300);

$("#staff_850_CONTAINER").animate({
    marginTop: staff_850_CONTAINER_ht * -1
}, 300);

$("#profile_850_HEADER").delay(160).animate({
    top: 10
}, 270);
$("#profile_850_BIO").delay(330).animate({
    top: profile_850_HEADER_ht + 20
}, 400);
$("#profile_850_EDU").delay(450).animate({
    top: profile_850_HEADER_ht + profile_850_BIO_ht + 20
}, 400);
$("#profile_850_CONTACT").delay(570).animate({
    top: profile_850_HEADER_ht + profile_850_BIO_ht + profile_850_EDU_ht + 20
}, 400);

});

setting it up like so runs on page load, how do you prevent it from it from running until the click happens but keep them seperate

function profile_850_close_animation() {
$("#staff_850_CONTAINER").animate({
    marginTop: 0
}, 300);

$("#clinic_850_CONTAINER").animate({
    height: staff_850_CONTAINER_ht
}, 300);

$("#profile_850_HEADER").animate({
    top: box_TOTAL_ht + 20
}, 300);
$("#profile_850_BIO").animate({
    top: box_TOTAL_ht + 50
}, 450);
$("#profile_850_EDU").animate({
    top: box_TOTAL_ht + 60
}, 450);
$("#profile_850_CONTACT").animate({
    top: box_TOTAL_ht + 70
}, 450);  
}

$("#profile_850_CLOSE").click(profile_850_open_animation());

Answer 1

Both of these would work:

$("#animation1, #animation2, #animation3").click(function() {
    // existing code
});

or

function animate() {
    //existing code
}
$("#animation1").click(animate);