내 메뉴 애니메이션 코드 간소화

클릭 할 때 확장하려는 '프로젝트'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(); 
      } 
     });

정말, 내 큰 문제는 두 번째 부분입니다 - 그것은 내가 것을 사용한다는 것을 짜증/IF else - 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

콜백에 좋은 점. 지연이있는 문제는 형제가 보이지 않아도 초기 미끄럼이 지연되는 것입니다. – zaius

형제가 있으면 siblings.length가 사실입니다. – wombleton

좋아요?

$(".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

내 메뉴 애니메이션 코드 간소화

답변

관련 문제