jQuery最小化和最大化HTML Div

Question

基本上，我試圖用jQuery動畫制作一個最小化/最大化div。 我有一個名為leftFilterBox的包裝div。 在leftFilterBox中，還有另一個div來包裝名為filterContent所有內容。 因此，當我最小化窗口時，filterContent應該折疊，並且在使用jquery動畫將filterContent折疊時，leftFilterBox將同時下移。 同樣也要最大化。 這是我的html代碼：

<div id='leftFilterBox'>
<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions

<div id='filterWindowNav'><img class='minMaxFilterBox' src='img/minimizeFilterWindow.png' onClick='minimizeFilterWindow();' />
<img class='minMaxFilterBox' src='img/maximizeFilterWindow.png' onClick='maximizeFilterWindow();' />
    <img class='closeFilterBox' onclick='closeLeftFilterBox();' alt='close' src='img/closeFilterWindow.png' /></div></div><br/>

<div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span><hr width='85%'></div>

</div>

而我的CSS：

#filterWindowNav {
float:right;
}
.minMaxFilterBox, .closeFilterBox {
    width: 28px;
    height: 28px;
    cursor: pointer;
}

而我的JavaScript：

function minimizeFilterWindow() {
$('#leftFilterBox').css('height', '25px');
$('#leftFilterBox').css('top', '90%');
}
function maximizeFilterWindow() {
    $('#leftFilterBox').css('height', '65%');
    $('#leftFilterBox').css('top', '30%');
}

這是我的jsFiddle鏈接： Fiddle

目前，我的代碼只是通過設置特定的某些CSS（例如height和top）來折疊filterWindow。 我想知道是否可以使用一些jquery動畫（例如slideUp()或slideDown()來增強效果，因為我嘗試了它，但是它不起作用。

提前致謝。

Answer 1

嗯，我無法讓您的代碼正常工作，但是我組織了代碼並添加了一些單擊事件來調用您的函數。 我還添加了背景色來顯示最大化效果正在發生，因為它並不那么明顯。

更新了小提琴演示

$('#minimize').click(function(){
    minimizeFilterWindow();
});

$('#maximize').click(function(){
    maximizeFilterWindow();
});

function minimizeFilterWindow() {
    $('#leftFilterBox').css('height', '25px');
    $('#leftFilterBox').css('top', '90%');
} 

function maximizeFilterWindow() {
    $('#leftFilterBox').css('height', '65%');
    $('#leftFilterBox').css('top', '30%');
    $('#leftFilterBox').css('background-color', '#000');
}

而且，更新后的HTML

<div id='leftFilterBox'>
    <div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions
        <div id='filterWindowNav'>
            <img id='minimize' src='img/minimizeFilterWindow.png'  />
            <img id='maximize' src='img/maximizeFilterWindow.png'  />
            <img id='close' alt='close' src='img/closeFilterWindow.png' />
        </div>
    </div>
    <br/>
    <div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span>
        <hr width='85%' />
    </div>
</div>