1

我正在尝试创建的此功能如何或有什么好的方法？

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


})

如果单击 ["about","contact","district", "games", "membership"] 中的 id，我想制作一些动画。但是如果 id = "home"，我想动画（或者如果已经在该页面上，则不要动画）它回来。

显然，我发布的这段代码不起作用。但是你们会建议什么样的方法呢？我应该把横幅的 id 放在我的页面顶部以数组的形式动画并循环遍历它吗？（看起来如何）或者我应该像现在一样创建许多不同的函数，每个 id 一个？

/W

4

4 回答 4

1

分配一个公用class而不是使用ids除了 home，因为除了 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;    
});
于 2013-03-21T10:57:00.290 回答
1

你可以这样尝试

$("#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;
 });
于 2013-03-21T11:01:04.710 回答
0

只需创建一个带参数的函数，因此当您单击时调用该函数并为该位置提供参数并简化它

于 2013-03-21T11:02:30.473 回答
0

您在这里看到的是编写上述代码的更好方法。.banner您说如果您已经在该页面上（或者这仅适用于主页？）您不想制作动画，因此如果单击的项目有，该函数将返回 falseclass="active"

注意：我没有测试代码，因为我没有其余的代码。

于 2013-03-21T11:16:25.087 回答