I'm trying to find a way to minimize the number of Selector look-ups. My issue is that I have a variable defined with base $(document).ready() that needs to be updated inside functions nested inside $(document).ready()
Consider this example (EDIT: I updated it to be more explanatory)
<script>
//var $current_page = $home_page; **<--I DONT want to do this, going global
and of course it doesn't work since
$home_page isn't defined yet.**
$(document).ready(function() {
var $home_page = $("#home-page");
var $portfolio_page = $("#portfolio-page");
var $about_page = $("#about-page");
var $current_page = $home_page; // **<--This variable, in this scope level,
// is what I want updated**
$("#home-btn").click(function () {
$current_page.stop()
$current_page.show()
$current_page.animate({
duration: 360,
easing: 'easeInCirc',
complete: function() {
$(this).css({ top: -700 });
}
);
$current_page = $home_page;
});
$("#portfolio-btn").click(function () {
$current_page.stop()
$current_page.show()
$current_page.animate({
duration: 360,
easing: 'easeInCirc',
complete: function() {
$(this).css({ top: -700 });
}
);
$current_page = $portfolio_page; //<--This needs to somehow update the
// variable in the $(document).ready
// scope, but not global**
});
});
<script>
How can I update the variable $current_page without making it a global variable?
EDIT: This is done to animate out the current page div when you click on a menu item. Yes, it's missing things, yes it may not make sense. It's just an example, not the actual application.
I understand this example is still trivial for performance, just ignore that fact. I just want to know how to do achieve this, not a lesson on whether it's the best practice or performance. Thanks guys.