jQuery: Is it possible to assign a DOM element to a variable for later use?
<p>I'm working on a project that is using jQuery, which I'm much more familiar with Mootools.</p>

<p>I'll start with my code first.</p>

<pre><code>var customNamespace = {
    status: 'closed',
    popup: $('#popup'),

    showPopup: function() {
        // ...  
    }
}

$(document).ready(function(){
    console.log($('#popup'));
    console.log(customNamespace.popup);
    console.log($(customNamespace.popup));

    $('#popup').fadeIn('slow');
    (customNamespace.popup).fadeIn('slow');
    $(customNamespace.popup).fadeIn('slow');
});
</code></pre>

<p>My goal is to not have jQuery traverse the DOM everytime I want to do something with the #popup div, so I wanted to save it to a variable to use it throughout my script.</p>

<p>When the page loads, the console prints out the object 3 times as I would expect, so I assumed that for each method, the fadeIn would just work. But it doesn't, only</p>

<pre><code>$('#popup').fadeIn('slow');
</code></pre>

<p>Actually fades in the div.</p>

<p>Even if I remove my namespace hash, and just save the object to a global variable, and do a  </p>

<pre><code>var globalVariable = $('#popup');
.
.
.
globalVariable.fadeIn('slow');
</code></pre>

<p>Also does not work as I thought it would. Can jQuery do what I am trying to do?</p>
