jQuery在現有的div之間翻轉

我發現了許多jQuery插件，可以讓你「翻轉」一個元素; SmashUp Labs的Flip!插件似乎最受歡迎/有用，這是我目前使用的。jQuery在現有的div之間翻轉

同時，當然在這裏和其他地方有很多解決方案可以在兩個不同的現有div之間進行切換，但是它們都不涉及翻轉。

但我需要的是兩件事情都要發生。我用Flip找到的問題！是它包含的內容作爲函數調用的一部分，而我實際上想要使用翻轉在兩個不同的現有div之間切換。我已經使用iframe或多或少使用了這個，但後來我使用了一個相當不必要的iframe，而且我還必須等待該幀在翻轉後加載，這看起來很糟糕。

翻轉的div的「邊」都太大而且很複雜，不能合理地插入到函數調用中，而且我不能使用類似$('div').text()這樣的東西，因爲它創建了div的副本而不是揭示我已經擁有的一個。

那麼，有沒有人知道任何圖書館翻轉，但允許你指定一個元素在翻轉結束後變得可見？或者有人用Flip！做過這種事情，或許使用它的回調函數？

來源

2012-07-26 KRyan

+1讓我翻轉！ – cbmeeks 2014-06-03 13:58:17

您可以嘗試使用CSS絕對位置將兩個div放在翻轉框頂部，以便div的內容位於翻轉框的背景之上，看起來像是在框中。

例如，你有DIV1和DIV2，在默認情況下，當頁面加載，Div1的顯示和DIV2具有風格顯示：沒有，那麼你掛鉤的回調倒裝，如：

$("#flipbox").flip({ 
    direction:'tb', 
    onBefore: function(){ 
     $('#div1').hide(); 
    }, 
    onEnd: function(){ 
     $('#div2').show(); 
    } 
});

的兩個內容div1和div2位於翻轉框的頂部，所以它們看起來像包含。

來源

2012-07-26 17:29:44 Drawyan

這是一種可能性，儘管我對流體設計中的絕對定位持懷疑態度。我會給它一個鏡頭，讓你知道它是如何去通過。 – KRyan 2012-07-26 18:09:32

這實際上運作得非常好。實際上並不需要使用絕對定位，因爲隱藏的div不佔用空間：我只是將div設置爲「width：100％;身高：100％;'因爲只有一個人表示，這很好。 – KRyan 2012-07-26 23:10:45

聽起來不錯，我沒有嘗試過這個，但我已經嘗試過這個技巧，用於這樣的其他事情。很高興它的工作，風格「顯示：無」不佔用任何空間，但如果你想要佔用空間，使用風格「可見性：隱藏」，這將佔用隱藏的div的大小，這是非常有用的如果你不想在顯示和隱藏期間改變元素的位置。 – Drawyan 2012-07-27 13:06:53

jQuery在現有的div之間翻轉

回答

相關問題