如何使其他元素滑动而不是跳出滑入元素的方式？

Question

我的网络应用程序顶部有一个小图标工具栏。其中一个，当点击时，滑出一个水平滑块来控制图像亮度。但是它右边的其他图标跳出来为滑块腾出空间进入视野，然后当它滑回视线时跳回来。

如何让其他图标随之滑动以腾出空间，而不是跳跃？

    $('#contrastSlider').slider();
    $('#contrast').click(function() {
        $('#contrastSlider').toggle("slide", 300);
    });

（图标都是div，float：left'ed。）

Answer 1

尝试使用animate：

$('#contrast').click(function() {
    $('#contrastSlider').animate({left: $('heredivid').width()}, 300);
});

Answer 2

您是否考虑使用class而不是id来定义它们？

例如：

<div class ="slider">stuff</div>
<div class ="slider">more stuff</div>

等...

当您点击其中一个div时，您的滑块可以通过以下方式调用：

$('.slider').toggle("slide", 300);