Question

I have the following code that works inside a function:

$('#MyPanel').stop().animate({ top: PanelTop }, 300);

However, I’d like to assign the div to an object so that jquery doesn’t have to reevaluate the reference every time.

I have a global variable and then I want to work with it in my function like this:

var ThePanel = $('#MyPanel');

ThePanel.stop().animate({ top: PanelTop }, 300);

Nothing happens. Any idea why?

Thanks.

Answer 1

The solution is to declare the global variable as null and then assign the div to the object variable in the document.ready function instead of in the global declaration section.

<script>

  var ThePanel = null;

  $(document).ready(function () {

    ThePanel = $('#MyPanel');

  });

</script>