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()方法作为setter，它返回一个jQuery对象，而一个对象在JavaScript中是一个真正的值，因此您的代码无法到达else部分。它应该是：

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

Answer 2

<强> 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

Answer 3

如果我正确理解你想要的东西，下面是另一种做动画的方法。

看到这个小提琴：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 4

这个easyer不仅仅用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'"

Div可以使用动画进行滑动，但不会向后滑动

4 个答案: