进行CSS过渡时，使用jQuery UI立即滑动两个Div

Question

单击箭头时，我正在尝试滑动" #left"div，并具有" #arrowtab"div（同时滑动）。
#arrowtabdiv不应从屏幕上滑下来，但是#left Div应该。换句话说，当箭头单击时，#leftdiv应该滑出视图，#arrowtabdiv应将冲洗片滑到屏幕的左侧。因此，当再次单击箭头时，一切都可以向右滑动。

同样，当单击时，我希望箭头以动画方式向左旋转（反之亦然）。

我尝试了#arrowtabdiv的相对和固定定位，但两者都没有正常工作。通过相对定位，它看起来像#arrowtabdiv跳跃，然后开始滑动。固定定位根本不会移动，然后消失。

这是我的小提琴：http://jsfiddle.net/erebel55/s5pad/7/

CSS：

#left {
    float: left;
    width: 20%;
    background-color: purple;
    margin-top: 50px;
    position: fixed;
    height: 100%;
    /*text wrapping*/
    word-wrap: break-word;
}
#arrow {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
   -webkit-transition: -webkit-transform linear 300ms;
   transition: transform linear 300ms;
}
#arrow.right {
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
}
#arrowTab {
    background-color:limegreen;
    border-radius: 0 6px 6px 0;
    /*position: fixed;*/
    /*left: 20%*/
    position: relative;
    left: 100%;
    opacity: .6;
}

JS：

$("#arrow").click(function() {
        $( "#left" ).toggle( "slide", 1000 ).toggleClass('slid');
        $(this).toggleClass("right");
});

Answer 1

，因为您的箭头tabdiv位于左DIV内。动画幻灯片结束后，左左消失（jQuery隐藏它），您的箭头标签也是如此。取出"箭头"选项卡，左后添加它。

在Erebel55的评论后更新：

将其添加到您的CSS：

.wrapper {
    overflow: hidden;
}

将您的JavaScript更改为：

$("#arrow").click(function() {
    if($(this).hasClass("right")) {
        $( "#left" ).animate({"left": '0'}).toggleClass('slid');
    } else {
        $( "#left" ).animate({"left": '-20%'}).toggleClass('slid');    
    }
    $(this).toggleClass("right");
});

我做了什么：

我将您的切换更改为jQuery的动画函数。现在，您的#left Div向左移动，而不是被缩小和隐藏。另外，我检查您的#Arrow是否有名为" Right"的课程。如果真实，您的#left Div将移至右侧，否则将移至左侧。另外：溢出：隐藏的"隐藏"移动的#left Div而不使其不可见。