javascript - Div 与动画一起滑入，但从不滑回

Question

我正在尝试使用 .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);
    }
  }
});

Answer 1

您将.css()方法用作返回 jQuery 对象的设置器，并且对象是 JavaScript 中的真实值，因此您的代码不会到达该else部分。它应该是：

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

Answer 2

如果我正确理解你想要什么，下面是另一种制作动画的方法。

看到这个小提琴：http: //jsfiddle.net/ZEH5b/

主要是这点...

$(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; });
        }
    }
});

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

Answer 3

仅使用 css 和更改 div 的 id 标签的 onclick 事件不是更容易完成吗：

#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="javascript:document.getElementById('item').value='itemclicked'"

Answer 4

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>

jQuery

$(function () {
    var $menu = $('#mobile-side-menu');
    var $slideButton = $('#mobile-menu-move');
    var $backButton = $('#mobile-menu-back');
    $slideButton.on('click', function () {
        $menu.animate({
            left: "0"
        }, 400, function () {});
    });
    $backButton.on('click', function () {
        $menu.animate({
            left: "-250"
        }, 400, function () {});
    });
});

jsFiddle