在执行css转换时使用jQueryUI同时滑动两个div

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

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

我尝试了#arrowTab div的相对定位和固定定位，但两种定位都不正确。通过相对定位，它看起来像#arrowTab div跳跃，然后开始滑动。固定定位时，它根本不移动，然后消失

这是我的小提琴：

CSS:

JS:

---

因为箭头选项卡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移向左侧，而不是缩小和隐藏。另外，我检查您的#arrow是否有一个名为“right”的类。如果为true，您的#left div将移到右侧，否则将移到左侧。此外：溢出：隐藏“隐藏”移动的#左div而不使其不可见。

对不起，我链接到了错误的JSFIDLE修订版（现在更新）。这对于固定定位是有意义的。relative也有同样的问题吗？我将arrowTab div放在左div中，因为我希望它们一起移动。（这就是我将arrowTab的位置设置为左侧的原因）。如果我把它从左边的div中拿出来，当左边滑动时它不会移动。

.wrapper {
    overflow: hidden;
}

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

    $(this).toggleClass("right");
});