What is the best strategy for creating this function that I am working on?
my_script.js
$(document).ready(function() {
$("#home").click(function() {
$('.banner').animate({top:'370px', height:'250px', }, 1000)
return false
})
$("#about").click(function() {
$('.banner').animate({top:'20px', height:'145px', }, 1000)
return false
})
$("#games").click(function() {
$('.banner').animate({top:'20px', height:'145px', }, 1000)
return false
})
$("#district").click(function() {
$('.banner').animate({top:'20px', height:'145px', }, 1000)
return false
})
$("#contact").click(function() {
$('.banner').animate({top:'20px', height:'145px', }, 1000)
return false
})
})
If an id in ["about","contact","district", "games", "membership"] is clicked, I want to trigger some animations. However, if id = "home" is clicked, I want to animate it back (or keep it stationary if already on that page).
The code provided above does not work as intended. What approach would you recommend? Should I store the IDs for the banner animation positions in an array and loop through them? How would that implementation look? Alternatively, should I create separate functions for each ID, like I have done currently?
/W