양식 제출시 페이지 슬라이드 전환을 수행하는 방법은 무엇입니까?

Question

양식을 제출하고 페이지를 다시로드 할 때 slide in 및 slide out과 같은 HTML 페이지에 일련의 양식이 있습니다. 이게 jquery로 가능합니까? 각 페이지에 페이지가로드 될 때 가능합니까 아니면 AJAX를 사용해야합니까?

Answer 1

네, 페이지에 음수 여백을 설정하고 페이지로드시 슬라이드 할 수 있습니다. 다음 progrmmatically 양식을 클릭 제출에 페이지를 애니메이션 및 제출 :

Example

HTML :

<form id="theForm" action="/three"> 
    <div id="slidable"> 
     <button id="bt_submit">Submit</button> 
    </div> 
</form> 

CSS :

#slidable { 
    height:200px; 
    width:200px; 
    border:5px solid red; 
    margin-left:-300px; 
} 

JQUERY

$(function() { 
    $("#slidable").animate({ 
     "margin-left": 0 
    }, 500); 
    $("#bt_submit").click(function (ev) { 
     ev.preventDefault(); 
     $("#slidable").animate({ 
      "margin-left": -300 
     }, 500, function() { 
      $("#theForm").submit(); 
     }); 
    }); 
}); 

• 의 예는 빨간색 사각형으로 작동하지만, 당신은뿐만 아니라 전체 페이지를 선택합니다 선택기를 조정할 수 있습니다.