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

Question

单击箭头时，我试图滑动“#左侧”div，并让“#arrowTab”div跟随它(同时滑动)。

#arrowTab div不应该从屏幕上滑动，但#左侧div应该这样做。换句话说，当点击箭头时，#左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;
}

联署材料：

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

Answer 1

因为箭头选项卡div位于左侧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的动画函数。现在，您的#左div移动到左边，而不是被缩小和隐藏。此外，我检查您的#箭头是否有一个名为“right”的类。如果是，您的#左div将被移动到右边，否则它将被移动到左边。此外:溢出:隐藏“隐藏”移动#左div，而不使其不可见。