jQuery : 슬라이드 왼쪽 및 오른쪽으로 슬라이드

Question

나는 slideUp 및 slideDown을 jQuery에서 보았습니다. 좌/우로 미끄러지는 기능/방법은 어떻습니까?

Answer 1

당신은 jQuery를 UI의 추가 효과와 함께이 작업을 수행 할 수 있습니다 See here for details

빠른 예 : jQuery UI 같은 비 대한 것을 원하지 않는 경우

$(this).hide("slide", { direction: "left" }, 1000); 
$(this).show("slide", { direction: "left" }, 1000); 

Answer 2

, 시도 내 사용자 지정 애니메이션 : https://github.com/yckart/jquery-custom-animations

너에게는 blindLeftToggle과 blindRightToggle이 적합합니다.

http://jsfiddle.net/ARTsinn/65QsU/

Answer 3

당신은 언제나 클래스, .addClass 또는 .toggleClass을 추가 할 jQuery를 사용할 수 있습니다. 그런 다음 모든 스타일을 CSS와 스크립트에서 유지할 수 있습니다.

http://jsfiddle.net/B8L3x/1/

Answer 4

이 코드는 잘 작동합니다. $ (문서) .ready (함수() { VAR 옵션 = {}; $ ("#의 C") 숨기기 (); $ ("# d"). ($ ("# c") toggle ("slide", options, 500); $ ("# d"). hide(); }); $ ("# b"). 클릭 (funct ion() { $ ("# d"). toggle ("slide", options, 500); $ ("# c").숨는 장소(); }}); }}); nav { float : left; 최대 너비 : 300px; 너비 : 300px; 여백 - 상단 : 100px; } article { margin-top : 100px; 높이 : 100px; } # c, # d { 패딩 : 10px; 테두리 : 1px 단단한 올리브; margin-left : 100px; 여백 - 상단 : 100px; background-color : blue; } 버튼 { 테두리 : 2 픽셀 단색 파랑; background-color : white; 색상 : 검정색; 패딩 : 10px; } 하이 레지스터 1



레지스터 2

<article id="c"> 
     <form> 
      <label>User name:</label> 
      <input type="text" name="123" value="something"/> 
      <br> 
      <br> 
      <label>Password:</label> 
      <input type="text" name="456" value="something"/> 
     </form> 
    </article> 
    <article id="d"> 
     <p>Hi</p> 
    </article> 
</body> 

참고 예 : W3schools.com 및 jqueryui.com

참고 :이 코드 예제는 입니다. 적절한 스크립트 기능을 수행하려면 모든 스크립트 태그를 추가하는 것을 잊지 마십시오.