$(".content").on("click", function(e) { if($(".content").css("transform") == "matrix(1, 0, 0, 1, 0, 0)") { $(".content").transition({ transform: 'translateX(200px)' }); } else { $(".content").transition({ transform: 'translateX(0px)' }); } });
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.js'></script> <div class="container"> <div class="left-menu"> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> </div> <div class="content"> <div style="margin-top: 200px;"> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> </div> </div> </div>
body { background-color: yellow; padding: 0; margin: 0; } .container { } .left-menu { background-color: yellowgreen; width: 200px; position: absolute; top: 0; left: 0; bottom: 0; right: auto; transition: width .2s ease; overflow: auto; z-index: 1; } .content { position: absolute; top: 0; bottom:0; left:0; right: 0; overflow: auto; z-index: 2; transform: translate3d(0, 0, 0); width: auto; height: auto; background-color: yellow; }