I am trying to find a way to minimize the number of Selector queries. My problem is that I have a variable defined with the base $ (document) .ready (), which needs to be updated inside the functions nested inside $ (document) .ready ()
Consider this example (EDIT: I updated it to become more explanatory)
<script>
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;
$("#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;
});
});
<script>
How can I update the variable $ current_page without making it a global variable?
EDIT: This is done to animate the current section of the page when you click on a menu item. Yes, it lacks things, yes, it may not make sense. This is just an example, not an actual application.
, - , . , , , . , .