如何在鏈接點擊時調整兩個div的大小

我有兩個div，每個div的高度分別爲15％，一個在另一個的底部，以便在中間留出70％的空間高度。點擊一個鏈接後，我希望每個div的高度增長到50％，然後縮小到15％以創建閃爍效果，以便中間區域的內容可以改變視野。如何在鏈接點擊時調整兩個div的大小

有沒有人有一個什麼jQuery或CSS我可以用來實現這一點的想法？

我嘗試這樣做：

$(".mnav li").click(function() { 
    $(".header").animate({ 
    height: 50% 
    }, 5000,});

與製作格50％的點擊

更新的意圖::我怎麼可以在下方修改這個代碼，以便它消除了動畫後級權隨着眨眼已完成，如果我點擊另一個鏈接，它會再次運行？

$('.mnav a').click(function() { 
    $('.border').addClass('blink'); 
});

來源

2015-10-13 Harry Potter

讓我們看看你已經嘗試什麼 –

50％的人會需要是一個字符串。此外，你有一個額外的逗號5000後。我假設你有你的控制檯中的錯誤... –

是的，迄今爲止這不是工作... –

試試這個....

HTML：

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <title>Temp</title> 
    <script src="js/jquery.min.js"></script> 
    <link rel="stylesheet" media="all" href="style.css" type="text/css"> 
    <script> 
    $(document).ready(function(){ 
     $('#btn').click(function(){ 
     $('#div2').hide('slow'); 
     $('#div1').animate({height:'50%'}) 
     $('#div3').animate({height:'50%'}) 

     $('#div2').show('slow'); 
     $('#div1').animate({height:'15%'}) 
     $('#div3').animate({height:'15%'}) 
     }); 


    }) 
    </script> 

    </head> 

    <body> 

    <div id="div1" style="background-color:red;width:100%;height:15%;"> 
    </div> 
    <div id="div2" style="background-color:blue;width:100%;height:70%;"> 
    </div> 
    <div id="div3" style="background-color:black;width:100%;height:15%;"> 
    </div> 
    <button id="btn">Click</button> 


    </body> 
    </html>

CSS：

html, 
body, 
#wrapper, 
#left, 
#right { 
    height: 100%; 
    min-height: 100%; 
} 

#wrapper { 
    margin: 0 auto; overflow: hidden; width: 960px; // width optional 
} 
#left { 
    background: yellow; float: left; width: 360px; // width optional but recommended 
} 
#right { 
    background: grey; 
    margin-left: 360px; 

}

JSFiddle

來源

2015-10-13 02:31:56 Chris

有沒有辦法做到這一點，顯示和隱藏行動發生在一次點擊？ –

如何在鏈接點擊時調整兩個div的大小

回答

相關問題