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隐藏它）和箭头选项卡。取出箭头选项卡，在左侧后附加它，它可以正常工作。

来自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'的类。如果为true，则#left div将向右移动，否则将向左移动。另外：溢出：隐藏'隐藏'移动的#left div而不使其不可见。

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

1 个答案: