滑动css和js内容过滤器答案

【问题标题】：Sliding css and js content filter滑动css和js内容过滤器
【发布时间】：2015-12-07 02:55:14
【问题描述】：

我正在制作一个 jquery 移动应用程序，并且有一个页面需要过滤一些帖子。我有帖子以及过滤器的设计。

您可以在下面看到它的样子：

我一直在尝试对其进行动画处理，因此如果用户在右侧按下“社交”，“外部”和“业务”将被推到左侧，因此您选择的过滤器始终位于中间，介于两个分隔线。

这是我将用来移动 div 的那种 js 示例，但仅适用于 1 个 div 而不是 3 个：

$(function(){
    var c=0;
    $("#click").click(function(){
        $(this).stop().animate({left: ++c%2*100 }, 'fast');
    });  
});

我遇到的问题是，如果用户每次都按下右侧或左侧的按钮，则需要无限数量的 div 滑入，我只是想知道如何实现这一点。

这是我正在使用的资产的 jsfiddle（没有 jquery 移动样式） https://jsfiddle.net/xczy346z/

编辑：如果你不明白我想要做什么，这也是我想要发生的事情的 gif。 Example Gif

【问题讨论】：

你的意思是当“外部/商业”被推到左边时，在移动它们之前会有一个“社交”的空白空间？
请将您目前拥有的脚本也添加到您的工作演示中，因为尚不清楚该脚本是如何/附加到哪个元素的。
@LGSon 嗨，对不起，我可能有点困惑，再看那个 js，我意识到它可能对我想要它做的事情没有帮助，我制作了一个快速 gif，所以你可以看到什么我希望最终结果看起来像。 i.gyazo.com/809f8c2ecca288c3052174a6306919ca.gif
好的，检查我的答案，我想我的方法可以帮助您轻松解决这个问题。
我的建议对您解决问题有帮助吗？

标签： javascript jquery html css animation

【解决方案1】：

使用这个 javascript

$(document).ready(function(){
    $("#social_one").click(function(){
        $("#side_scroll").animate({marginLeft: '-=130px'}, 500);
    });
});

【讨论】：

【解决方案2】：

理论上，我可以建议您从 html 和 css 中删除分隔符 (#divider_***)，并将它们作为伪添加到 text_slider 上，就像这样

#text_slider:after {
  content: "";
  position: absolute;
  left: 33%;
  top: 10%;
  bottom: 10%;
  width: 33%;
  border-left: 1px solid white;
  border-right: 1px solid white;
  pointer-events: none;
}

这样做可以使side_scroll 保持干净，并且只有在制作动画时可以使用“按钮”。

现在您可以简单地将 side_scroll 设置为向右或向左设置动画，中间有选中的“按钮”，无论它们有多少。

这是一个 updated fiddle of yours 显示伪：

【讨论】：