Question

I have a tenuous grip on jQuery, but am trying to learn the basics of adding regular Javascript to it. I want to ‘save’ a sequence of animates as a function, and then call that function via several different click events. What is the best way to go about this?

jsFiddle – http://jsfiddle.net/kfycP/1/

Simplistic Sample Code:

$(document).ready(function() {

function animateCube() {
    $('.test').fadeOut();
    $('.test').delay(500).slideDown();
}

$('.test').click(function() {
// Play "animateCube"
});

$('.link').click(function() {
// Play "animateCube"
});

});

Answer 1

I would assign the function to a var and reference it as the click handler for your events.

$(document).ready(function() {

  var animateCube = function() {
    $('.test').fadeOut();
    $('.test').delay(500).slideDown();
  }

  $('.test').click(animateCube);

  $('.link').click(animateCube);

});

If you want to execute some additional code, I would wrap the handler in an anonymous function.

$('.test').click(function(){
  // execute more code
  animateCube();
  // execute even more code
});