Question

我屏幕左侧有一排按钮

按钮按钮按钮

当按下其中一个按钮时，我希望它们以这种缓慢移动的方式对齐屏幕右侧，反之亦然

按钮按钮----＆gt; -------------＆gt; ---------＆gt; -----＆gt; ----- ---＆GT;按钮

到目前为止，这是我的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();
        });
    });

我的css

.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中有一个更简单的方法来做这个，但是我已经查看了大量的文档，并试图谷歌一个答案而无法找到任何东西：（

Answer 1

如果你想要动画，你需要（margin-right）设置为你的css中的值。它只能以一种方式工作，因为你只在你的css中定义了（margin-left）。

希望这有帮助。

使用jquery创建按钮捕捉

1 个答案: