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


$(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?


Problem courtesy of: XT_Nova


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; });

Solution courtesy of: Adil


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; });

Discussion courtesy of: Gautam3164

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

Discussion courtesy of: Diani

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.

Discussion courtesy of: stefanz

This recipe can be found in it's original form on Stack Over Flow .

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: function,animate,click,false,top,banner,return,height,courtesy
本文标题:How do you create a jQuery function with multiple .click() functions within it?

技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(50)