Question

On mootools I’m used to declare once and reuse often. An FX example would go like this:

myEffect1 = new Fx.Slide($('myElement1'));

How should I go on jQuery? Meaning, the docs make it straightfoward to use:

$('myElement1').click(function(e){
    this.slideToggle();
});

But if I want to call this effect somewhere else on my code will I have to re-declare it? And isn’t this approach more resource hungry than the one above? How would this be properly done on jQuery?

Answer 1

Just manually cache the result set in a variable before calling the function, then reuse the function as needed:

var $el_one = $("#path .to > .selection"), // Stores jQuery object
    $el_two = $("#path .to > .second");    // Stores jQuery object

var effect = function(){
    $el_one.fadeIn();
    $el_two.fadeOut();
}

Now you can call effect any time without reselecting the items. They instead use the cached jQuery selection to animate correctly.

If you need more clarity, let me know.