Javascript 如何制作隐藏/显示其他元素的滑块元素

我有一个固定的页脚，我正在寻找方法，使按钮的行为如下：

-------------------------------------------------------------------------------------
|BackButton                     SliderButton ShareButton1 ShareButton3 ShareButton4 |
-------------------------------------------------------------------------------------

后退按钮位于页脚的左侧，而其他按钮位于页脚的右侧

我试图完成的是SliderButton操作。我需要它这样做：当点击时，通过在页脚中有一个向右滑动的动画来隐藏共享按钮，这样当点击时，它看起来就像下面一样（注意：…只是空格，而不是实际的点）。此外，此操作完成后，您应该能够单击SliderButton并将其向左滑动，从而再次显示ShareButton

--------------------------------------------------------------------------------------
|BackButton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . SliderButton |
--------------------------------------------------------------------------------------

---

我使用CSS，Javascript，jQuery，HTML来完成这个任务；然而，我在滑块按钮部分挣扎。我尝试了许多不同的方法（使用动画功能），但没有一种方法能像我需要的那样工作。这可能是由于我的标记或由于我的HTML安排，我不确定；这就是为什么我没有在这里包含我的代码，这样我就可以从这个问题的答案中学习，而不会因为我自己的工作而产生偏见。

此代码将滑动按钮向右移动

因为我不知道你们的元素名，所以我假设为随机变量名

我得走了，但你可以在我的小提琴里做点什么

$(document).ready(function(){
    $('.slide').click(function(){
        $('.social').animate({width:'toggle'},350);
    });
});

---

我尝试过很多不同的方法，它们在哪里？告诉我们。你能发布你的html代码和js代码吗？一个更有效的方法是把所有的东西都弄乱：）没有问题：）但我仍然没有弄清楚这段代码有什么问题：/从这里剽窃：

$(document).ready(function(){
    $('.slide').click(function(){
        $('.social').animate({width:'toggle'},350);
    });
});