jQuery的動畫分頁面，並顯示顯示李的照片裏面我的網頁上一個div

我有一個網格佈局想一些幫助其動畫在項目上的點擊來顯示隱藏的div會被揭密的內容。我想：jQuery的動畫分頁面，並顯示顯示李的照片裏面我的網頁上一個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

來源

2013-11-05 Youngnate DaGreat

沒有任何草圖我無法理解動畫概念。嘗試http://html.adobe.com/edge/animate/ –

這正是我想要的，但我不想通過整合進程，因爲這個動畫依賴於堆疊的divs http://tympanus.net/Tutorials/ FullscreenSlitSlider/ –

什麼是「提高半個頁面的」呢？「降低頁面的下半部分」是什麼意思？ – jfriend00

一個。提高頁面的一半（及其內容）

當單擊一個按鈕時，我將假設所有動畫將在點擊按鈕時執行！所以

.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。爲了加載ajax內容，增加中心div的大小。

對於這一點，你將使用這一行：

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

現在做到這一點：

$('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 
    } 
    }) 
}

這是你將如何能夠下邊距添加到示例的元件，並且負載AJAX數據在另一元件，並顯示它在底部！

℃。降低頁面的下半部分（及其內容）

類似的事情在這裏，只是將它移動一點在底部！通過增加利潤，或者通過使用position: absolute並給予參數！

來源

2013-12-15 09:00:06

jQuery的動畫分頁面，並顯示顯示李的照片裏面我的網頁上一個div

回答

相關問題