How do I cache jQuery selections?

Question

I need to cache about 100 different selections for animating. The following is sample code. Is there a syntax problem in the second sample? If this isn't the way to cache selections, it's certainly the most popular on the interwebs. So, what am I missing?

note: p in the $.path.bezier(p) below is a correctly declared object passed to jQuery.path.bezier (awesome animation library, by the way)

This works

    $(document).ready(function() {
        animate1();
        animate2();
    })
    function animate1() {
        $('#image1').animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate1()", 3000);
    }
    function animate2() {
        $('#image2').animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate2()", 3000);
    }

This doesn't work

    var $one = $('#image1'); //problem with syntax here??
    var $two = $('#image2');
    $(document).ready(function() {
        animate1();
        animate2();
    })
    function animate1() {
        $one.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate1()", 3000);
    }
    function animate2() {
        $two.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate2()", 3000);
    }

Answer 1

If the images are not loaded when you call them, jQuery will return an empty object. Move your assignment inside your document.ready function:

$(document).ready(function() {
    var $one = $('#image1');
    var $two = $('#image2');
    animate1();
    animate2();
});
// ... etc.

If you need to cache them for later use outside of your initialization script then add them to a storage object:

var my_storage_object = {};
$(document).ready(function() {
    var $one, $two;
    my_storage_object.$one = $one = $('#image1');
    my_storage_object.$two = $two = $('#image2');
    animate1();
    animate2();
});
// ... etc.

Then later on, outside of document.ready you can call:

my_storage_object.$one //still has a reference to the jQuery object.

Answer 2

   var one = $('#image1');
   var two = $('#image2');
    $(document).ready(function() {
        animate1();
        animate2();
    })
    function animate1() {
        one.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate1()", 3000);
    }
    function animate2() {
        two.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate2()", 3000);
    }

fix

when you do:

   var one = $('#image1');

you're storing the jquery object returned by the selector in the var "one". So you don't need to use $ anymore.