簡化我的菜單動畫代碼

我有一大堆'項目'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

簡化我的菜單動畫代碼

回答

相關問題