2滑动的div水平Jquery的

Question

我要让像this.

当一个容器在某一点上滑出。我认为这将是2个div。 1个前锋和1个后卫。当两个div都不在时，整个容器仍然是集中的。

我不知道该如何开始。可能会得到一些指导开始？

Answer 1

这是这样做的一种方法。请注意，我正在使用CSS转换属性，它在9以下的IE和其他浏览器的旧版本中不支持。

$("button").click(function() { 
 
    $(".container").toggleClass("opened"); 
 
});

div { 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 

 
.container { 
 
    position: absolute; 
 
    margin-left: -100px; 
 
    margin-top: -50px; 
 
    left: 50%; 
 
    top: 50%; 
 
    transition: margin-left .2s linear; 
 
} 
 

 
.container.opened { 
 
    margin-left: -200px; 
 
} 
 

 
.back { 
 
    background: red; 
 
    transition: margin-left .2s linear; 
 
} 
 

 
.container.opened .back { 
 
    margin-left: 200px; 
 
} 
 

 
.front { 
 
    background: green; 
 
    margin-top: -100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="back"></div> 
 
    <div class="front"></div> 
 
</div> 
 
<button type="button">Push me!</button>

另一种方法是使用的，而不是添加open类的div.back jQuery的动画：

$(".back").animate({ 
    margin-left: 200px, 
}, 200, 
function() { 
    // Animation complete. 
});