Javascript Div随动画滑入，但从不滑回

我正在尝试使用.animate（）使div滑入屏幕左侧。它一开始可以工作，但之后就不会向后滑动了。只有在。任何关于它不起作用的原因或更好的解决方案的建议都非常棒：）

编辑：现在下面的函数被调用为onclick

$(function() {
  toggleMobileMenu = function() {
    var menu = $('#mobile-side-menu');

    if( menu.css('left', -250) ) {
        menu.animate({left: 0}, 400, function(){
            positionValue = 0;
        });
    } else { 
        menu.animate({'left': '-250'},400);
    }
  }
});

CSS

#mobile-side-menu{position:relative;left:-250;display:block;}

HTML

<ul id="mobile-side-menu">
    <li>Home</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
</ul>
<button id="mobile-menu-move">Show Menu</button>
<button id="mobile-menu-back">Remove Menu</button>

您正在使用

.css（）

方法作为setter，它返回一个jQuery对象，并且一个对象在JavaScript中是一个真实值，因此您的代码不会到达

else

部分。应该是：

if ( menu.css('left') === '-250px' ) {
   // ... 
}

---

下面是另一种方式做动画，如果我正确理解你想要什么

看这把小提琴：

主要是这一点

$(function() {
    var block = $("#block");
    var slid = false;
    block.click(toggleMobileMenu);

    function toggleMobileMenu() {
        if (slid) {
            block.animate({left: "+=250"}, 400, function () { slid = false; });
        }
        else {
            block.animate({left: "-=250"}, 400, function() { slid = true; });
        }
    }
});

---

我认为，通过按钮触发的动画可以相对容易地应用于菜单。

这不是简单地通过css和一个onclick事件更改div的id标记就可以完成的吗：

#itemclicked{
transition:0.5s; /*also do transitions specific for webkit, moz etc...search google for css transitions*/

margin-left:-250px;
/*and the rest of the css*/
}

还有onclick

onclick="javascript:document.getElementById('item').value='itemclicked'"

---

你想让它立即滑过还是在悬停时滑过？您希望它何时滑回？我希望它在单击按钮时滑入。。。现在我正在链接上使用onclick。啊。。。我明白你将它用作“setter”的意思。但是，它似乎不是一个好的比较器，因为它跳到了我的“else”。@JIGGABITS我假设你已经在CSS中将

left

属性设置为

-250px

，你可以通过记录它来检查返回的值，

console.log（）

。作为旁注，您可以在调用

.animate（）

之前使用jQuery

.stop（）

方法，以获得更好的动画效果。我想使用此方法，但“slided”变量在动画后不会更新。我不确定是否遵循此方法，它在小提琴中是否工作正常？对我来说，当点击时，方块会左右移动，这取决于滑动的是什么。是的，在小提琴中，它工作正常。我已将var slide=false添加到我的函数中，但在整个函数运行后，它仍然slide=false。

$（function（）{toggleMobileMenu=function（）{var menu=$（'#mobile side menu'）；var slide=false；if（slide）{menu.animate（{left:'-=250'}，400，function（）{slide false；return slided；}）elided；}否则{menu.animate（{left:'+=250'}，400，function（）{slide=true；return slided；}）；}console.log（'slide='+slided）；}}}）

尝试在togglemobileemenu函数之外声明slide。另外，我认为您不需要

return slided

行。

onclick="javascript:document.getElementById('item').value='itemclicked'"