增加DIV的使用jQuery的高度動畫，而無需按下含量下降

HTML

<div id="header-line"></div> 
<div id="main-menu"></div> 
<div id="content"></div>

CSS

#header-line { 
    height: 20px; 
    background-color: black; 
    top:0; 
    left:0; 
} 
#main-menu { 
    height: 30px; 
    background-color: green; 
} 
#content { 
    background-color: blue; 
    height: 200px; 
}

的Javascript

$("#main-menu").hover(function() { 
    $(this).stop(true, false).animate({ 
     height: "100px" 
    }); 
}, function() { 
    $(this).stop(true, false).animate({ 
     height: "30px" 
    }); 
});

Demo jsFiddle

我所做的中間DIV擴大其使用jQuery animate功能高度。但這個問題是它向下推底部DIV。

如何使它在底部DIV擴大不推下來？

來源

2013-06-21 Nalaka526

更改HTML來

<div id="header-line"></div> 
<div id="content"> 
    <div id="main-menu">Expands on hover</div> 
</div>

更改了jQuery

$("#main-menu").hover(function() { 
    $(this).stop(true, false).animate({ 
     height: "100px" 
    }); 
}, function() { 
    $(this).stop(true, false).animate({ 
     height: "30px" 
    }); 
});

改變風格

#header-line { 
    height: 20px; 
    background-color: black; 
    top:0; 
    left:0; 
} 
#main-menu { 
    height: 30px; 
    background-color: green; 
    position:relative; 
    z-index:3; 
} 
#content { 
    background-color: blue; 
    height: 200px; 
}

主要目的是把DIV的其他分區中，然後將其拿下「T把底部div的下降。

Working fiddle.

來源

2013-06-21 07:35:30 Robert

太感謝你了......它的工作原理... :) – Nalaka526

不客氣:) – Robert

在如果您想要控制動畫的持續時間，請在'.animate（..）'，'{duration：100}'內添加另一個名爲duration的屬性以獲取更多信息，單擊[here]（http://api.jquery.com/animate /） –

這是一個CSS的問題，你必須添加的位置是：絕對的;綠色DIV，但你必須修復寬度：Test

#main-menu { 
    height: 30px; 
    background-color: green; 
    position: absolute; 
}

來源

2013-06-21 07:36:05 maqjav

你想做的事可以通過包裝在包裝的兩個元素與position:relative

這種方式可以實現你能絕對位置子元素，你的內容區域&父項擴展欄（新的div）

將其設定爲絕對的，他們將留在位置和擴大DIV將基本上重疊內容中的一個下：

這裏的示例http://jsfiddle.net/JuG6X/6/

來源

2013-06-21 07:37:05 JanR

在這裏，您只需將內容div設置爲新的高度即可。（#content）

http://jsfiddle.net/JuG6X/

來源

2013-06-21 07:37:07 copypaste

Somethinglike這樣的：

#header-line { 
    height: 20px; 
    background-color: black; 
    top:0; 
    left:0; 
} 
#parent{ 
    position:relative; 
} 
#main-menu { 
    height: 30px; 
    background-color: green; 
    width:100%; 
    position:absolute; 
    top:0; 
    z-index:100; 
} 
#content { 
    background-color: blue; 
    height: 200px; 
    width:100%; 
    position:absolute; 
    /* take into account : borders, margin, previous sibling height */ 
    top:30px; 
}

http://jsfiddle.net/techunter/7ytgy/

這是在許多其他的解決方案。你需要添加一個家長#parent相對定位，它將作爲其子女的參考。

來源

2013-06-21 07:39:27 TecHunter

哇，我做小提琴的時候得到4個答案... – TecHunter

試試這個在您的CSS，

#header-line { 
    height: 20px; 
    background-color: black; 
    top:0; 
    left:0; 
} 
#main-menu { 
    height: 30px; 
    background-color: green; 
    z-index:1; 
    position:relative; 
} 
#content { 
    background-color: blue; 
    height: 200px; 
    z-index:0; 
    top:50px; 
    position:absolute; 
    width:100%; 
}

工作小提琴http://jsfiddle.net/JuG6X/14/

來源

2013-06-21 07:40:05

增加DIV的使用jQuery的高度動畫，而無需按下含量下降

回答

相關問題