2012-12-08 5 views
0

jQuery에서 slideUp 기능을 사용하는 드롭 다운 메뉴가 있습니다. 나는 일정한 속도를 제거하고 빨리 시작하고 느리게 끝낼 수 있는지 궁금해하고 있었다. 나는 주위를 둘러 보았고 animate에있는 easing 방법에 대해 읽었습니다. 그러나 시도해 보았습니다. 그러나 slideUp에만 작동하지 않는 것 같습니다. animate (틀린 말이라면 알려주세요); 하지만 그렇지 않으면, 나는 그것을 알아낼 수 없습니다. 어떤 아이디어? 여기에 내 현재 코드입니다 :.jQuery - slideup 시작 속도가 빠르며 종료가 느림니까?

$(document).ready(function(){ 
    var h = "fast"; 

    $("[data-action='dropdown']").click(function(e) { 
     e.stopPropagation(); 
    }); 

    $("body").click(function() { 
     $("[data-action='dropdown'] ul ul").slideUp(h); 
    }); 

    $("[data-action='dropdown'] ul li").click(function() { 
     $("[data-action='dropdown'] ul ul").slideUp(h); 

     $("ul", this).slideDown(h, function(){ 
      $("ul", this).slideUp(h); 
     }); 
    }); 
}); 

html로는 아주 기본적인 드롭 다운 구조 (내부 중첩 li의 다음 내부 ul들과 단지 ul 요소는 다음 CSS에서, 나는 내부 ul ul가 숨겨져있는 곳으로 그것을 만들 아무 것도 표시하지 않고 jQuery로 토글).

도움이 필요하시면 대단히 감사하겠습니다. :-)

+3

, 핵심 라이브러리에는 두 가지 여유 옵션 만 있습니다. 도코를 읽었 니? – nnnnnn

+0

네,하지만'스윙'으로 보이고'선형 '이 제가 정확히 찾고있는 타입이 아닙니다 ...'스윙이나 선형'을 변형 시키거나 수정할 수있는 마법 같은 방법이 있습니까? – ModernDesigner

+2

jQuery UI 또는 다른 [easing plugin] (http://gsgd.co.uk/sandbox/jquery/easing/)을 사용하여 더 많은 옵션을 얻을 수 있습니다. – nnnnnn

답변

4

앞서 언급 한 것처럼 jquery easing plugin을 사용하면됩니다.

http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js 

그런 다음 당신이 slideUp 함수에서 매개 변수로 여유 변수를 사용할 수 있습니다 :

다운로드 및이 자바 스크립트 파일을 포함한다.

비록 자바에서 [.slideUp '()는'방법 (http://api.jquery.com/slideup/)가 완화 파라미터를 수락

$('#Example').slideUp({ 
    duration: 1000, 
    easing: 'easeOutCubic' 
}); 

Demo

+0

아, 고마워! 내가 중괄호 '{...}'를 포함하지 않았다는 사실이 드러났다. 고마워! – ModernDesigner

관련 문제