Question

所以基本上我希望这个能够工作，这样当用户点击最左边的div时，左边的div从25％扩大到75％，而中间div从50％缩小到0％。我已经尝试了几种方法，但似乎无法使用。

HTML

<!DOCTYPE html>
<html>
<head>

    <title>Skynet</title>

    <!-- css reference-->
    <link rel = "stylesheet" href = "css/main.css" type = "text/css">

    <!-- jquery call-->
    <script href="/js/jquery-1.11.1.js" type="text/javascript"></script>

    <!--Page animation -->
    <script href="/js/main.js" type="text/javascript"></script>

    <!-- ui implement-->
    <link rel="stylesheet" href="css/jquery-ui-1.10.4.css" />
    <script href="/js/jquery-ui-1.10.4.js" type="text/javascript"></script>

</head>

<body>
    <div class = "container">
        <!-- left panel-->
        <div class = "left">
                <img src="css/res/skynet_mdlarge.png" alt="Logo" height="130" width="130">
        </div>
        <!-- middle panel-->
        <div class = "mid">

        </div>
        <!-- right panel-->
        <div class = "right">

        </div>
    </div>  
</body>

CSS

body, html {
height: 100%;
margin: 0px;
}

.container {
height: 100%;

display: flex;
flex-direction: row;
 }

.left {
width: 25%;
height: 100%;
position: relative;
background: url('res/binding_dark_@2X.png') repeat;

}

.mid {
width: 50%;
height: 100%;
position: relative;
background: url('res/tweed_@2X.png') repeat;
}

.right {
width: 25%;
height: 100%;
position: relative;
background: url('res/binding_dark_@2X.png') repeat;

}

JS

$(document).ready(function(){
    $(".left").toggle(function(){
        $(".left").animate({width:'75%'},300);
        $(".mid").animate({width:'0%'},300);

    }
    function(){
        $(".left").animate({width:'25%'},300);
        $(".mid").animate({width:'50%'},300);

    });

});

Answer 1

就个人而言，我会尝试尽可能多地保留CSS中的内容样式。我会改变.container元素上的一个类，这样我就可以更灵活地使用CSS了。

HTML

<div class="container">
  <div class="left">Left</div>
  <div class="mid">Mid</div>
  <div class="right">Right</div>
</div>

CSS

* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  height: 100%;
}

.container {
  height: 100%;
}

.left, .mid, .right {
  float: left;
  background-color: #e99;
  overflow: hidden;
  transition: all .3s;
  height: 100%;
}

.left {
  width: 25%;
}
.mid {
  width: 50%;
}
.right {
  width: 25%;
}

.expanded .left {
  width: 75%;
  background-color: #f00;
  color: #fff;
}

.expanded .mid {
  width: 0;
}

JS

$('.left').on('click', function () {
  $('.container').toggleClass('expanded');
});

请注意，动画在旧浏览器中不起作用，但左侧面板仍会展开。你必须权衡你的选择，但我认为这会导致你保持理智。

以下是我制作的演示：http://jsbin.com/siyejeqa/3/edit?css,js,output

您必须自己为其他浏览器添加前缀。

Answer 2

看一下这句话animated div 整个想法基于float：left和 animate（）函数。

$( ".left" ).animate({
        width: "75%"
        }, 1500 );

而

.container {
width:100%;
height: 100%;
position:relative;
 }

和

.left {
width: 25%;
height: 100%;
background: yellow;
float:left;
}
.mid {
width: 50%;
height: 100%;
background:red;
float:left;
}

.right {
width: 23%;
height: 100%;
background: green;
float:left;
}

如何使用JQuery的.toggle（）设置div百分比宽度的动画

2 个答案: