Question

这是@Tom RNS帮助的原创想法：JSFIDDLE

    $(document).ready(function () {
       $("#moving").click(function () {
          $("#moving").toggleClass("left");
        });
    });

这很好......但是，我需要稍微改进一下：

最初DIV仍然是宽度的50％，但是当点击滑动DIV时我需要将它缩小到宽度的三分之一，并使显示的右DIV三分之二......

这可能吗？如何？谢谢！

Answer 1

有点棘手，但它有效......

https://jsfiddle.net/mq2c2129/7/

$(document).ready(function() {
   $("#moving").click(function(){
      $("#left").toggleClass("left");
      $("#moving").toggleClass("left");
      $("#right").toggleClass("left");
   });
});

Answer 2

你是说这个意思吗？

https://jsfiddle.net/m46wLz0n/

<div id="wrapper">
        <div id="left" >
        <p>Left side</p>
    </div>
    <div id="right">
        <p>Right side</p>
    </div>
    <div id="moving">
        <p>Moving div</p>
    </div>
</div>

的CSS

#wrapper{
    position: relative;
}
#left{
    background-color: red;
    width:50%;
    height:150px;
    float: left;
    transition: width 0.5s;
}
#left.smallerLeft{
     width:33.33%;    
}
#right{
    background-color: green;
    width: 50%;
    height:150px;
    float: left;
    transition: width 0.5s;
}
#right.biggerRight{
    width:66.66%;
}
#moving{
    background-color: blue;
    width:50%;
    height: 150px;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transition: all 0.5s; /* Safari */
    transition: all 0.5s;
}
#moving.left{
    left:0;
    width:33.33%;
}

Javascript

  $(document).ready(function() {
     $("#moving").click(function(){
        $("#moving").toggleClass("left");
        $("#right").toggleClass("biggerRight");
        $("#left").toggleClass("smallerLeft");
     });
  });

Answer 3

您也可以尝试通过向右元素添加类来实现此目的。

jQuery的：

$(document).ready(function() {
   $("#moving").click(function(){
      $("#moving").toggleClass("left");
       $("#right").toggleClass("right");
   });
});

CSS：

#moving.left{
    left:0;
    width: 33.33%;
}
#right.right{
    width: 66.66%;
    margin-left: -16.66%;
}

以下是一个示例：https://jsfiddle.net/mq2c2129/14/

DIV向左滑动，保持在顶部并减小到较小的宽度

3 个答案: