Jquery 如何将元素滑动到一起？

所以我试着在工具栏中创建一系列图标，这里用小的彩色方块表示

前两个，对比度和对比度2，将有弹出式滑块控制的东西。我只是想让图标平稳地移动到滑块的一边，然后平稳地回到原来的位置。我现在将动画设置为低速，这样我们就可以看到发生了什么。正如你所看到的，它们不规则地移动，而且不正确——你可以通过点击红色的方块来看到动作

我做错了什么

 $('#contrastSlider').slider();
 $('#contrastSlider').hide()
 $('#contrast').click(function () {

     var cs = $('#contrastSlider'),
         w = cs.outerWidth(true);
     if (!cs.is(':visible')) {
         $('#about').css('margin-left', -w + 40);
         $('#contrast2').css('margin-left', -w);
         w = 0;
     }

     cs.toggle("slide", 2000);

     $('#contrast2').animate({
       'margin-left': -w
       }, 2000, function() {
         this.style.marginLeft = 0;
     });

     $('#about').animate({
         'margin-left': -w + 40
       }, 2000, function() {
         this.style.marginLeft = 0;
     });

 });

---

这让你接近了。如您所见，您不必如此努力工作。：-）

这是一个不依赖ID的变体，每个框都有一个滑块（更新为使用类而不是变量）：

---

这让你接近了。如您所见，您不必如此努力工作。：-）

这是一个不依赖ID的变体，每个框都有一个滑块（更新为使用类而不是变量）：

---

我将在这个回答中进一步解释我的评论

html结构：

<ul>
    <li class="box">Menu</li> 
    <li class="slider">
    <li class="box">Menu</li> 
    <li class="slider">
    <li class="box">Menu</li> 
</ul>

---

我将在回答中详细解释我的评论

html结构：

<ul>
    <li class="box">Menu</li> 
    <li class="slider">
    <li class="box">Menu</li> 
    <li class="slider">
    <li class="box">Menu</li> 
</ul>

---

之前更新了小提琴，错误的链接。你想这样做吗？然后再回到原来的位置，是的！见鬼…虽然我真的不明白为什么滑块的宽度被神秘地设置为0px时会如此之宽，但之前的链接是错误的。你是在尝试这样做吗？然后再回到原来的位置，是的！见鬼…虽然我真的不明白为什么滑块如此宽，但根据你的小提琴，它们的宽度神秘地设置为0px，我很可笑地接近让它工作，但有一个奇怪的错误——看这里，在这种情况下，前两个现在都有工作滑块，但是在点击一个之后，要激活另一个，必须单击两次。到底为什么？？哦，我忘了为每个滑块创建变量。他们都用同一个！我相信你能处理好，对吗？你正在为每个按钮和滑块制作相同的功能。使用类和

next（）

删除所有冗余！斯文的答案在这方面要好得多。哦，我看到它已经被编辑了，很好的劫持：PMy的编辑是在斯文的答案出来之前完成的。您可以将鼠标悬停在任何时间戳上，并获取秒的时间。这里没有劫机。不过，我只是再次编辑以使用类而不是变量。根据你的小提琴，我已经非常接近让它工作了，但有一个奇怪的错误——看这里，在本例中，前两个现在都有工作滑块，但在单击一个之后，要激活另一个，你必须单击两次。到底为什么？？哦，我忘了为每个滑块创建变量。他们都用同一个！我相信你能处理好，对吗？你正在为每个按钮和滑块制作相同的功能。使用类和

next（）

删除所有冗余！斯文的答案在这方面要好得多。哦，我看到它已经被编辑了，很好的劫持：PMy的编辑是在斯文的答案出来之前完成的。您可以将鼠标悬停在任何时间戳上，并获取秒的时间。这里没有劫机。不过，我只是再次编辑以使用类而不是变量。

<ul>
    <li class="box">Menu</li> 
    <li class="slider">
    <li class="box">Menu</li> 
    <li class="slider">
    <li class="box">Menu</li> 
</ul>

$('.box').click(function() {
    // get the next li, it will be an slider because this is an .box li
    $slider = $(this).next();

    // animate all sliders to 0px width. so hiding all the sliders
    $('.slider').stop().animate({ width: '0px' }, 300);

    // do we have an slider? #about box doesn't 
    if($slider != null) {
        // the other sliders are still in the 'hiding' animation, but now we say to this slider to stop that animation and now to animate to 200px width 
        $slider.stop().animate({ width: '200px' }, 300);
    }
});