在进行 css 转换时使用 JQuery UI 一次滑动两个 div

Question

单击箭头时，我试图滑动“#left”div 并让“#arrowTab”div 跟随它（同时滑动）。
#arrowTab div 不应该滑出屏幕，但 #left div 应该。换句话说，当单击箭头时，#left div 应该滑出视图，而#arrowTab div 应该齐平滑动到屏幕的左侧。因此，当再次单击箭头时，所有内容都可以滑回右侧。

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

我尝试了#arrowTab div 的相对定位和固定定位，但都不能正常工作。通过相对定位，它看起来像#arrowTab div 跳跃然后开始滑动。固定位置，它根本不动，然后消失。

这是我的小提琴： 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

因为您的箭头标签 div 位于左侧 div 内。动画幻灯片结束后，左侧消失（JQuery 隐藏它）并且您的箭​​头选项卡也消失了。取出箭头标签，将其添加到left之后，它就可以工作了。

来自 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而不使其不可见。