如果启用了向左浮动，如何在其他div上为div设置动画？

Question

基本上，我有一个父div，宽度为100％，3个子div，每个宽度为33.333333％。 所有3个div都向左浮动，因此它们在一行中对齐。

我想将33.333333％的div之一动画为100％，但是我想要做的是跳过其他2 div而又不将其推到下一行？

<div id="fullwidth">
    <div id="history" class="thirdwidth">
        <h1>Our History</h1>
    </div>
    <div id="now" class="thirdwidth">
        <h1>Now</h1>
    </div>
    <div id="whatwedo" class="thirdwidth">
        <h1>What We Do</h1>
    </div>
</div>

我该怎么做呢？

在这里查看示例：

https://jsfiddle.net/y9qcd2wc/2/

Answer 1

 $(".thirdwidth").on("click", function(){ $(this).toggleClass("active"); }); 

 html, body{margin:0; height:100%;} .thirdwidth { position:absolute; z-index:0; top:0; width: 33.333%; height: 100%; transition: 0.4s; -webkit-transition: 0.4s; } .thirdwidth.push0{left:0%;} .thirdwidth.push1{left:33.333%;} .thirdwidth.push2{left:66.333%;} #history {background:red;} #now {background:green;} #whatwedo{background:blue;} .thirdwidth.active{z-index:1; left:0; width:100%;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="fullwidth"> <div id="history" class="thirdwidth push0"> <h1>Our History</h1> click to maximize, and click again to minimize </div> <div id="now" class="thirdwidth push1"> <h1>Now</h1> </div> <div id="whatwedo" class="thirdwidth push2"> <h1>What We Do</h1> </div> </div>