Question

我有两个div，每个15％的高度位置一个在另一个的顶部，从而在中间留出70％的高度空间。点击一个链接，我希望每个div的高度增加到50％然后缩小到15％以创建一个闪烁效果，这样中间区域的内容就可以在视野之外变化。

有没有人知道我可以使用什么jquery或css来实现这个目标？

我试过了：

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

目的是让点击率达到50％

更新::我如何编辑下面的代码，以便在动画完成后立即删除该类，如果我点击另一个链接它会再次运行？

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

Answer 1

试试这个......

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

如何通过单击链接调整两个div的大小

1 个答案: