Question

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

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

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

我试图完成的是SliderButton动作。我需要它表现得像这样：当点击时通过在页脚内部滑动右侧动画来隐藏共享按钮，这样当点击时它看起来像下面（注意：......只是空格，而不是实际的点）。此外，在此操作完成后，您应该能够单击SliderButton并且它应该向左滑动，从而再次显示ShareButtons。

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

我正在使用CSS，Javascript，jQuery，HTML执行此任务;但是我在滑块按钮部分挣扎。我尝试了很多不同的方法（使用animate函数），但没有任何方法可以按我需要的方式工作。这可能是由于我的标记或由于我的HTML安排，我不确定;这就是为什么我没有在这里包含我的代码，以便我可以从这个问题的答案中学习，而不会受到我自己的工作的偏见。

Answer 1

此代码将SliderButton移动到右侧。

由于我不知道您的元素名称，我假设随机变量名称

#axis:hover .move-right{
    transform: translate(350px,0);
    -webkit-transform: translate(350px,0); /** Chrome & Safari **/
    -o-transform: translate(350px,0); /** Opera **/
    -moz-transform: translate(350px,0); /** Firefox **/
}

Answer 2

<强> http://jsfiddle.net/tquLww3h/

要离开，但你可以做一些像我的小提琴。

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

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

2 个答案: