JQueryUI：同時滑動兩個div

我有一個網頁，其中有兩個div佔據整個空間。我想一次顯示一個JQueryUI幻燈片切換，以便一個div滑向左側，並由右側的另一個div替換。不幸的是，現在，由於兩個動畫同時發生，第二個div出現在第一個div下面，然後向上滑動以替換動畫結尾處的第一個div。我如何定位第二個div使滑動運動無縫地發生？JQueryUI：同時滑動兩個div

代碼：

<script type="text/javascript"> 
    $('#schedule').hide(); 
    $('#changer').click(function() { 
      $("#roster").toggle("slide", {direction: "left"}, "fast"); 
      $("#schedule").toggle("slide", { direction: "right"}, "fast"); 

      if ($("#changer").html() == 'Schedule View') 
       $("#changer").html('Roster View'); 
      else 
       $("#changer").html("Schedule View"); 
     }); 
</script>

來源

2013-04-22 user1742188

設置z-index（w3schools）的股利較高。

您可以將此視爲網站的圖層。例如0出現在底部10出現在頂部。

來源

2013-04-22 00:02:59

這並不能解決問題。問題是，在動畫發生時，div2低於div1，因此在短時間內我的網頁是其正常高度的兩倍。當div1完全滑出時，div2突然跳起來佔據它的位置。 – user1742188 2013-04-22 00:18:43

考慮這個小提琴：http://jsfiddle.net/FkNa2/2/

相關的代碼是CSS定位，

// html 
<p>some content here </p> 
<div class="container"> 
    <div id="div1"></div> 
    <div id="div2"></div> 
</div> 
<button>Toggle</button> 

// css 
#div1{ 
    width: 500px; 
    height: 100px; 
    background-color: blue; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

#div2{ 
    width: 500px; 
    height: 100px; 
    background-color: red; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

.container { 
    width: 800px; 
    position: relative; 
    left: 100px; 
    height: 100px; 
}

關鍵是要確保雙方的div將佔據視口中的同一位置。這是通過絕對完成，他們都定位到相同的座標。請注意，這些座標是相對於外部div。請參考這個問題的答案https://stackoverflow.com/a/10426717/30007

兩個「相對」和「絕對」的定位是真正相對的，只是不同的框架。「絕對」定位是相對於另一個封閉元素的位置。「相對」定位是相對於元素本身在沒有定位的情況下具有的位置。

這取決於你的需求和目標，你使用哪一個。當您希望從元素流中所具有的其他元素的位置替換元素時，「相對」位置是合適的。使某些字符出現在上標位置。「絕對」定位適合於將元件放置在由另一元件設置的某個系統的座標系中，例如，用某些文字「疊印」圖像。

作爲一個特殊的，使用「相對」，沒有位移定位（只是設置的位置是：相），以使一個元件的參考框架，這樣就可以使用「絕對」定位爲是它裏面的元件（在標記中）。

來源

2013-04-22 03:27:17

JQueryUI：同時滑動兩個div

回答

相關問題