Jquery左右滑动无序列表

Question

我目前正在开发UI / UX搜索过滤器界面，该界面是一个更大的网络应用程序。

我有一切正常，但我想清理代码，特别是jQuery幻灯片通过动画左右效果。 （见截图）

正在使用的库和框架：

• Kendo UI
• JQuery的
• 基金会6

CodePen：http://codepen.io/covanant/pen/rxNBvN/

在这个项目中不允许使用JQuery UI，这就是为什么我使用动画创建与＆＃34; slide＆＃34;相同的效果。在jQuery UI中。

以下是我用来浏览每个弹出窗口的代码。

下一步

  $("#nextButton1").click(function() {
    var $lefty = $("#popUp1");
    $lefty.animate({
      left: parseInt($lefty.css('left'), 10) == 0 ?
        -$lefty.outerWidth() : 0      
    }).delay(400).fadeOut("fast");    
    var $lefty2 = $("#popUp2");

    $lefty2.animate({
      left: parseInt($lefty2.css({left: $lefty2.outerWidth(), display: 'block' }), 10) == 0 ?
        -$lefty2.outerWidth()  :  0  
    });        
  });

过去

  $("#lastButton2").click(function() {
    var $righty = $("#popUp2");
    $righty.animate({
      left: parseInt($righty.css('left'), 10) == 0 ?
        $righty.outerWidth() : 0      
    }).delay(400).fadeOut("fast");    
    var $righty2 = $("#popUp1");

    $righty2.animate({
      left: parseInt($righty2.css({left: -$righty2.outerWidth(), display: 'block' }), 10) == 0 ?
        -$righty2.outerWidth()  :  0  
    });        
  });

它来自Learning jQuery的修改后的片段，我确定它的某些部分甚至不是必需的。基本上我会为每个弹出窗口重复这个片段，我知道它很可怕，但这是我的JS功能的范围。

问题是，当有更多弹出窗口时会有其他情况。

我需要一些帮助，使这个＆＃34;向左和向右滑动＆＃34;效果更优雅，更紧凑。

谢谢。

CodePen：http://codepen.io/covanant/pen/rxNBvN/