如何在链接点击时调整两个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的大小

回答

相关问题