滑動css和js內容過濾器

我正在製作一個jQuery的移動應用程序，並有一個頁面需要過濾一些帖子。我有帖子，以及過濾器的設計。滑動css和js內容過濾器

你可以看到它的樣子如下：

我一直在努力，如果用戶按下「社會」右側動畫會這樣，「外」和「業務」，將被推出到左邊，所以你選擇的過濾器總是在兩個分隔線之間的中心。

這裏的排序JS我打算用它來走動的div不過的例子只是爲1個格，而不是3：

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

我是遇到的問題是，如果用戶是每按一次左右按鈕都需要有無限數量的div滑入，我只是想知道如何實現這一點。

這裏與我使用的資產的jsfiddle（不jQuery Mobile的造型） https://jsfiddle.net/xczy346z/

編輯：這也是什麼，我想，如果你無法理解我嘗試要發生GIF製造。 Example Gif

來源

2015-12-06 llama

你的意思是，當「外部/業務」被推向左邊會出現一個空的空間，其中「社會」是之前移動它們？ – LGSon

請將您目前爲止的腳本添加到您的工作演示中，因爲不清楚腳本附加到哪個/哪些元素。 – LGSon

@LGSon嗨對不起，我可能有點困惑，第二眼看着那個JS，我意識到它可能無助於我想做的事，我做了一個快速的GIF，這樣你就可以看到我想要的最終結果喜歡。 https://i.gyazo.com/809f8c2ecca288c3052174a6306919ca.gif – llama

使用這個JavaScript

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

來源

2015-12-06 18:24:31 hardcoder

從理論上講，我可能會建議您無論是從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示出模擬：

來源

2015-12-06 18:46:31 LGSon

滑動css和js內容過濾器

回答

相關問題