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

当单击箭头时，我试着滑动“#left”div并让“#arrowTab”div跟着它（同时滑动）。
#arrowTab div不应该滑出屏幕，但#left div应该。换句话说，当单击箭头时，#left div应该滑出视图，并且#arrowTab div应该滑动到屏幕的左侧。因此，再次单击箭头时，所有内容都可以滑回到右侧。使用JQuery UI同时滑动两个div，同时进行css转换

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

我尝试了#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"); 
});

来源

2014-01-23 erebel55

因为你的箭头标签的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将移动到右侧，否则它将移动到左侧。另外：overflow：hidden'隐藏'移动的#left div而不使其不可见。

来源

2014-01-23 22:36:42

对不起，我链接到错误的jsfiddle修订（现在更新）。这对固定定位有意义。亲戚的问题是否一样？ – erebel55

因为我希望它们一起移动，所以我将箭头Tab div放在左边的div中。（这就是为什么我将arrowTab的位置设置为左）。如果我将它从左边的div中取出，它在左侧幻灯片时不会移动。 – erebel55

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

回答

相关问题