兩個div之間的幻燈片的傳送帶類型

我想要以旋轉木馬的方式顯示兩個div卡。向用戶呈現帶有圖形視圖的卡片。該卡還有一個更多信息的按鈕;當他點擊信息按鈕時，卡片應滑動到屏幕右側並消失，而包含支持信息的卡片應顯示在屏幕左側。兩個div之間的幻燈片的傳送帶類型

比較遺憾的是缺乏知識的提前

這裏就是我寫。

HTML：

  <div id="userNav" class="box -width--4of4"> 
       <div class="data-card"> 
        <button id="loginPanel" class="button -fill--transparent -is--icon pull-right"><i class="fa fa-info-circle"></i></button> 
        <div id="container" style="min-width: 310px; height: 400px; margin: 20px auto"></div> 
       </div> 
      </div>

JQuery的：

$('#loginPanel').click(function(){ 

      if ($('#userNav').is(':hidden')) { 

       $('#userNav').show('slide',{direction:'left'},1000); 
      } else { 

       $('#userNav').hide('slide',{direction:'left'},1000); 
      } 
}); 


$('#loginPanel1').click(function(){ 

      if ($('#userNav').is(':hidden')) { 

       $('#userNav').show('slide',{direction:'right'},1000); 
      } else { 

       $('#userNav').hide('slide',{direction:'right'},1000); 
      } 
});

來源

2017-07-06 Alecio Silva

我看到類.pull右，也使用Font Awesome。我們是否每次使用Bootstrap？ – jswebb

我是的@jswebb –

看看我的答案，讓我知道，如果這是你在想什麼。 – jswebb

你可以換兩張卡在一個容器中，將其設置爲position: relative;，使絕對定位的卡。然後，您可以創建特定的卡片類來模擬動畫，在設定的時間內同時更改每個元素的位置和不透明度。

這可以通過幾種不同的方式來實現，但這裏有一個fiddle顯示了基本概念。

編輯：小提琴更新，以反映評論的問題。

來源

2017-07-06 14:16:15 jswebb

通過將位置更改爲相對位置，其他div將安裝在這些位置之上。另外，我放棄了卡上的造型。也許如果我把它放在我的頁面的不同部分;雖然我仍然會遇到這個樣式不適用的問題。 –

默認情況下，'div'適合其內容;然而，由於其所有內容都被拉出頁面流，容器崩潰了。爲了解決這個問題，你只需要明確地設置容器div的寬度。看到更新的小提琴[這裏]（https://jsfiddle.net/33s6moxn/1/）。 – jswebb

關於樣式：我無法提供幫助，因爲您沒有提供CSS，所以我不知道您如何設計DOM元素。請記住，從上到下編寫CSS時順序很重要，同時還要考慮選擇器的特殊性。 – jswebb

兩個div之間的幻燈片的傳送帶類型

回答

相關問題