0

我正在我决定使用 jquery 的第二个站点上工作。我遇到了问题，无法解决，也没有在网上找到解决方案。

所以，我创建了一个页面站点，它有一个菜单，每个项目都会触发特定的动画（水平移动+淡出）。通过点击第二个/第三个或第五个链接，所有初始主页动画都淡出，同时点击“主页”，所有动画/图像/等。正在回到它们原本应有的位置。但是，如果我单击“主页”两次或十次，每次单击时，所有水平动画的东西都会按指定的距离无限移动。

所以，我的问题是： 1.我应该如何解决这个问题 - 多次点击“主页”菜单项会产生无尽的动画；2.如何使其他菜单项正常工作，并通过单击“主页”将所有动画对象返回到初始位置？

这是我的代码。抱歉，如果您在这里发现一团糟 - 我在 jquery 中真的很绿。先感谢您 ：）

<div id="nav">
    <ul class="nav">
       <li id="home"><a class="active" href="#">home</a></li>
       <li id="stylist"><a href="#">hair stylist</a></li>
       <li id="salon"><a href="#">salon</a></li>
       <li id="center"><a href="#">dibi center</a></li>
       <li id="gallery"><a href="#">gallery</a></li>
       <li id="press"><a href="#">press</a></li>
       <li id="check"><a href="#">check up</a></li>
    </ul>
 </div>

 $(document).ready(function() {
     var nav_0 = $("li#home")
     var nav_1 = $("li#stylist")
     var rot1 = $("#rotate_1")
     var rot2 = $("#rotate_2")
     var rot3 = $("#rotate_3")
     var rot4 = $("#rotate_4")
     var rot5 = $("#rotate_5")
     var initialPage = $("#fade")

 nav_0.click(function(){
     initialPage.fadeIn(1500);
     rot1.animate({"left": "-=20%", "opacity": "1"}, 1000);
     rot2.animate({"top": "-=400px", "opacity": "1"}, 1000);
     rot4.fadeIn(2000);
     rot5.animate({"left": "+=200px", "opacity": "1"}, 1000);
     rot3.animate({"top": "+=300px", "opacity": "1"}, 1000);
 });

 nav_1.click(function(){
     initialPage.fadeOut(2000);
     rot1.animate({"left": "+=20%", "opacity": "0"}, 1500);
 rot2.animate({"top": "+=400px", "opacity": "0"}, 1500);
 rot4.fadeOut(800);
 rot5.animate({"left": "-=200px", "opacity": "0"}, 1500);
 rot3.animate({"top": "-=300px", "opacity": "0"}, 1500);
 });
 });
4

1 回答 1

1

如何检查菜单是否已经动画：

if($('.menuClass:animated').length == 0){
  *do the animation . . .*
}

这将检查'.menuClass'是否动画，如果不是，它将启动动画。如果它是动画的，它将什么都不做。

于 2013-09-24T15:24:47.713 回答