jQuery 애니메이션이 페이지를 반으로 나누고 div를 표시합니다.

Question

리의 내부 사진을 표시하는 내 페이지에 그리드 레이아웃이 있습니다. 공개 될 숨겨진 div 안에 내용을 표시하기 위해 항목을 클릭 할 때 애니메이션으로 도움이 필요합니다. 내가 좋아하는 것 :

a. raise half of the page(and its contents) 
b. increase the size of a div in the center for ajax content to be loaded. 
c. lower the lower half of the page(and its contents) 

코드 펜 (시험) : http://codepen.io/anon/pen/yktvD

Answer 1

을 수행합니다. 페이지의 절반을 올리기

버튼을 클릭하면 버튼을 클릭 할 때이 애니메이션이 모두 실행된다고 가정합니다! 따라서

.element { 
    margin: 0; // on load no margins.. 
} 

$('button').click(function() { // start the jquery animation.. 
    $('.element').css({ // alter the css properties.. 
     margin: '0 0 50% 0' // change the margin.. 
    }) 
} 

b. 아약스 콘텐츠가로드 될 수 있도록 센터의 div 크기를 늘립니다. 이를 위해

,이 라인을 사용하는 것입니다 :

$('button').click(function() { // you can change the event.. 
    /* and at the same time, load the ajax content */ 
    $('otherelement').load('page_url'); // load the page content in element 
    // or this one 
    $.ajax({ // start the ajax request; alternate to the load 
    url: 'page_url', // url to the page 
    success: function (data) { // catch the response on success 
     $('otherelement').html(data); // write the response 
    } 
    }) 
} 

이것은 당신이 아래쪽 여백을 추가 할 수있을 것입니다 방법의 예는 다음과 같습니다

$('element').css({ 
    height: 'addmoreheight', 
    /* if more are required! */ 
}) 

을 지금 이렇게 요소를 만들고 다른 요소에 아약스 데이터를로드하고 하단에 표시하십시오!

c. 페이지의 하단부와 내용을 낮추십시오.

비슷한 점은 아래쪽으로 조금 이동하십시오! 여백을 추가하거나 position: absolute을 사용하고 매개 변수를 제공하십시오!