How do you create a jQuery function with multiple .click() functions within it?

Question

How or, what is a good approach for this function i'm trying to create?

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"] - are clicked, i want to animate some stuff. But if id = "home", i want to animate (or don't animate if alreade on that page) it back.

Obviously, this code i posted doesen't work. But what kind of approach would you guys suggest? Should i put the id's for the banner to animate to the top of my page in an array and loop through it? (How does that look like) Or should i create many diffrent functions, one per id, like now?

/W

Adil · Accepted Answer · 2013-03-21 10:57:00Z

1

Assign a common class instead of using ids except home, as you have same code for all items other then home.

$("#home").click(function() {
    $('.banner').animate({top:'370px', height:'250px', }, 1000)
     return false;    
});

$(".commonclassexcepthome").click(function() {
     $('.banner').animate({top:'370px', height:'250px', }, 1000)
     return false;    
});

answered Mar 21, 2013 at 10:57

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GautamD31 · Accepted Answer · 2013-03-21 11:01:04Z

1

You can try like this

$("#home").click(function() {
     $('.banner').animate({top:'370px', height:'250px', }, 1000)
     return false;    
 });

 $("#about,#contact,#games,#district").click(function() {
     $('.banner').animate({top:'20px', height:'145px', }, 1000)
     return false;
 });

answered Mar 21, 2013 at 11:01

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

1 Comment

XT_Nova Over a year ago

Worked like a charm. I tried something similar before, but obv not the same since it didn't work then. :) Thank you for your answer!

Diani · Accepted Answer · 2013-03-21 11:02:30Z

0

just make a function with parameters so when you click you call the function and give the parameters for the position and you simplify it

answered Mar 21, 2013 at 11:02

Diani

36 bronze badges

Comments

stefanz · Accepted Answer · 2013-03-21 11:16:25Z

0

What you're seeing here is a better way to write the code above. You said that you do not want to animate .banner if you are already on that page ( or is this available only for home page? ) so the function will return false if the clicked item has class="active"

Note : i did not test the code because i don't have the rest of code.

answered Mar 21, 2013 at 11:16

stefanz

1,32713 silver badges23 bronze badges

Collectives™ on Stack Overflow

How do you create a jQuery function with multiple .click() functions within it?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related