Question

我正在制作一个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

Answer 1

使用此javascript

＆＃13;

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

＆＃13;

`

Answer 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保持干净，只保留＆＃34;按钮＆＃34;在动画时使用。

现在，您只需将side_scroll设置为右侧或左侧的动画，即可选择＆＃34;按钮＆＃34;在中间，无论他们将会有多少。

这是显示伪：

的updated fiddle of yours

滑动css和js内容过滤器

2 个答案: