简化我的菜单动画代码

我有一大堆'项目'div，我想在点击时展开。如果已经有一个项目打开，我想在我滑出新项目之前隐藏它。我也想停止点击已关闭的项目，然后再打开它。简化我的菜单动画代码

这里是我的意思的例子（警告 - 写在浏览器的代码）：

 $('.projects').click(function() { 
      var clicked_project = $(this); 

      if (clicked_project.is(':visible')) { 
      clicked_project.height(10).slideUp(); 
      return; 
      } 

      var visible_projects = $('.projects:visible'); 
      if (visible_projects.size() > 0) { 
      visible_projects.height(10).slideUp(function() { 
       clicked_project.slideDown(); 
      }); 
      } else { 
      clicked_project.slideDown(); 
      } 
     });

真的，我的大问题是与第二部分 - 它吮吸，我不得不使用，如果/否则 - 如果没有任何visible_projects，我应该能够立即进行回调运行。

我认为这将是一个非常普遍的任务，并且我确信有一个我错过的简化。任何建议感激！

来源

2010-05-04 zaius

slideToggle？

$('.projects').click(function() { 
    var siblings = $(this).siblings('.projects:visible'); 
    siblings.slideUp(400); 
    $(this).delay(siblings.length ? 400 : 0).slideToggle(); 
});

使用延迟而不是回调，因为每个匹配项目调用一次回调。如果有多个项目可见，这将导致多个切换。

来源

2010-05-04 08:49:22 wombleton

不错。这样做的工作，但是有没有什么办法可以在幻灯片播放完成之后才进行切换？如果我把它放在回调中，如果没有任何可见的项目，它将不会执行。 – zaius 2010-05-04 21:13:06

回调的好处。只有拖延的问题是，即使没有可见的兄弟姐妹，它仍然会延迟初始滑动。 – zaius 2010-05-05 00:59:20

如果有兄弟姐妹，兄弟姐妹。长度将是truthy。 – wombleton 2010-05-05 05:32:57

是否这样？

$(".projects") 
.click(function() { 
var a = $(this); 
if (a.is(":visible")) return a.height(10) 
    .slideUp(), void 0; 
var b = $(".projects:visible"); 
b.size() > 0 ? b.height(10) 
    .slideUp(function() { 
    a.slideDown() 
}) : a.slideDown() 
})

来源

2012-11-09 06:07:41

简化我的菜单动画代码

回答

相关问题