3

我有 3 个 div。前两个在第三个之上。

顶部的 div 具有不同的高度，一次只能看到一个：它们切换其可见性。因为它们的高度不同，所以当这两个 div 切换时，它们会导致下方第三个 div 的顶部位置发生变化。我想知道是否有办法使用 CSS 过渡来使第三个 div 的移动平滑。

这是 HTML：

<div id="Toggle">click here</div>

<div id="InnerDiv1"></div>
<div id="InnerDiv2"></div>

​&lt;div id="BottomDiv"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

这是CSS：

#InnerDiv1{
    height:30px;
    width:200px;
    background:red;
    margin:10px 10px;   
    clear:both;}

#InnerDiv2{
    height:60px;
    width:200px;
    background:blue;
    margin:10px 10px;
    clear:both;    
    display:none;}

#BottomDiv{
    height:60px;
    width:200px;
    background:yellow;
    margin:10px 10px;
    transition:all 2s ease;}

还有一些用于切换的快速 jquery：

$('#Toggle').click(function() {
    $('#InnerDiv1').toggle();
    $('#InnerDiv2').toggle();
});​

为了清楚起见，这里是jsfiddle。

目标是让黄色 div 平滑移动。我可以用 jquery 做到这一点，但我想知道是否有办法让它只用 CSS 工作。

感谢您的建议。

4

2 回答 2

2

好吧，如果我知道这段代码的用途，我可以举一个更好的例子。所以我只是猜测。

http://jsfiddle.net/35USv/1/

这是一种设置不当的切换。不过也有好东西。您可以使用 -webkit-transition 或 -moz 或 -o 来制作动画。你现在也只需要考虑一个元素，就可以改变那个 div 的内容。

于 2012-09-03T01:13:17.170 回答
1

当您将鼠标悬停在 innerDv1 上时，这将使其工作。希望这可以帮助。

#InnerDiv1{
   height:30px; 
    height:30px;
    width:200px;
    background:red;
    margin:10px 10px;   
    clear:both;
-webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;}
#InnerDiv1:hover {
   height:60px; 
    height:60px;
    background:blue;
}
于 2014-08-21T12:49:54.190 回答