使用jquery创建按钮捕捉

屏幕左侧有一排按钮

按钮按钮按钮按钮

当其中一个按钮被按下时，我希望它们像这样缓慢地移动到屏幕右侧，反之亦然

按钮按钮按钮 ---->------------->--------->----->--------> 按钮

这是目前为止我的jquery代码

 $( ".nav-submenu-item" ).on('click',function() {
        $(this).animate({ 
            left: '90%'
          }, 500);
        $(this).animate({ 
            left: '0px'
          }, 1).delay(0).queue(function (next) {
            $(this).css("display","none");
    $(this).next().css("display","inline-block");
            next();
        });
    });
    $( ".nav-submenu-item-clicked" ).on('click',function() {
        $(this).animate({ 
            left: '-700px'
          }, 500);
        $(this).animate({ 
            left: '0px'
          }, 1).delay(0).queue(function (next) {
            $(this).css("display","none");
    $(this).prev().css("display","inline-block");
            next();
        });
    });

.nav-submenu-item{position:relative; vertical-align:top; display:inline-block; font-size:.8em; color:#eaeaea; height:auto; width:auto; float:left; margin-left:15px; margin-top:10px; text-align:left; line-height:30px; font-weight:bold;}
.nav-submenu-item-clicked{display:none; vertical-align:top; font-size:.8em; color:#eaeaea; height:auto; width:auto; float:right; margin-left:15px; margin-top:10px; line-height:30px; font-weight:bold;}

我的PHP是这样的

<div class="nav-submenu-item">
    <div class="nav-submenu-icon">button</div>
</div>
<div class="nav-submenu-item-clicked">
    <div class="nav-submenu-icon">button</div>
</div>

我对这段代码的问题是1)不干净，动画也不干净2)动画只能从左到右，而不是从右到左3)它从左向右移动的量是不正确的，因为它是一个固定的值，显然当一个按钮向右移动或一个按钮的位置向左移动时，它应该相应地调整

我真的希望有一个更简单的方法在Jquery中做到这一点，但我已经看了成堆的文档，并试图谷歌的答案，找不到任何东西:(