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

回答

相关问题