修改

Question

这是我想要完成的JSFiddle 链接...当我点击右侧Div时，它向左侧滑动，但我如何让它保持在左侧div的顶部......所以它是可见的......

$(document).ready(function() {
  $("#right").click(function(){
   $("#right").toggle("slide", {direction: "left"}, 500);
  });
});

另外，如何在右侧DIV下放置第三个DIV，因此当右侧div向左移动时显示...

谢谢！

Answer 1

要保持在顶部，你必须删除浮动并放置绝对定位：

   #right, #left {
       position :absolute;
       top: 0;
   }

修改

有了更好的解释，可以试试这个：

 $(document).ready(function() {
    $("#right").click(function(){
       $("#right").animate({left: 0}, 500);
    });
 });

CSS

 #right {
     position: absolute;
     left: 50%;
     z-index:1 ;
 }

请参阅小提琴：https://jsfiddle.net/mq2c2129/2/

Answer 2

我会从这样的2个浮动div开始：

#left{
    background-color: red;
    width:50%;
    height:150px;
    float: left;
}
#right{
    background-color: green;
    width: 50%;
    height:150px;
    float: left;
}

移动div的绝对定位始终超过2个浮动div，以及用于管理滑动效果的过渡属性：

#moving{
    position: absolute;
    top: 0;
    left: 50%;
    width:50%;
    background-color: blue;
    height: 150px;
    transition: all 0.5s;
}

对于绝对定位的div，我们需要包装div相对定位：

#wrapper{
    position: relative;
    overflow: hidden;
}

然后我们为左上角添加一个类：

#moving.left{
    transform: translateX(-100%);
}

javascript只需在点击它时切换移动div“left”类，滑动效果通过CSS过渡属性进行管理：

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

看到这个小提琴：

https://jsfiddle.net/mq2c2129/5/

DIV向左滑动并保持在顶部

2 个答案:

修改