2012-07-05 2 views
2

그래, jquery의 "slideUp"및 "slideDown"기능을 재현하려고하지만 Flexbox를 표시 할 때!flexbox의 slideDown 애니메이션

jQuery.fn.toggleFlexbox = function() { 
    var elm = $(this[0]); 
    if(elm.css('display') === "none"){ 
     elm.css('display', '-webkit-flex'); 
    }else{ 
     elm.slideUp('fast'); 
    } 
}; 

이 내가 가지고 얼마나 멀리

elm.animate({"display":"-webkit-flex"}, 1000); 
(현재 코드가 작동 이상하지만 우리는 "없음"에서 전환 할 때와에 "-webkit-플렉스"밀어하지 않습니다, 나는 다음과 같은 시도)

단순히 내가 클래스 (요소 "설정 내 모든 객체와 페이지를 시작하기 때문에 경우


이상하게도 필자가이 일을 ... 오류 또는 아무것도하지 않고, 애니메이션을하지 않습니다 작동하지이 ") 디스플레이로로드하고 싶습니다. fl 예는 다음이 내가 설정 섹션을 slidedown을 클릭하면 인 flexbox를 적용 할 것으로 보인다

$('.settings').hide(); 

으로 숨길하지만 난 다른 페이지로 갔어요 때 행동이 올바르게 ... 아주 이상한 다시 온다! 나는 (큰 경우입니다) 정확하게 질문을 이해 해요 경우 것 같은


이상하게도 내가 피들러에서 그것을 다시 수 없습니다 .... http://jsfiddle.net/FzqA7/ ..

답변

1

, 그것은 소리 내가 전에 잠시 고민했던 것과 같은 문제를 겪었습니다. 즉, 애니메이션의 절반 만 시작되면 (한 번 미끄러 져 내려 갔을 때 slideUp이 작동하지 않습니다.)

애니메이션의 첫 번째 반복 후에 "돌아 가기"를 추가하여 주위를 둘러 보았습니다. 클릭 이벤트 트리거 였지만 기능을 종료하면 여러 순열이 중요했습니다.

시도 : 나는 완전히 질문을 오해하고있어,하지만 조금 모호한 경우

jQuery.fn.toggleFlexbox = function() { 
     var elm = $(this[0]); 
     if(elm.css('display') === "none"){ 
      elm.css('display', '-webkit-flex'); 
      return; 
     }else{ 
      elm.slideUp('fast'); 
      return; 
     } 
    }; 

죄송합니다 ....