Div 会滑入动画，但从不滑回

Div slides in with animation, but never slides back

本文关键字：动画 Div      更新时间：2023-09-26

我正在尝试使用 .animate（） 将div 幻灯片滑入屏幕左侧。 它最初有效，但随后不会向后滑动。 只有在。 任何关于为什么它不起作用或更好的解决方案的建议都会很棒:)

编辑：现在下面的函数正在被调用。

$(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()方法作为setter，它返回一个jQuery对象，而对象是JavaScript中的真实值，所以你的代码不会到达else部分。它应该是：

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

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

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

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

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

js小提琴

只需使用

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'"
相关文章：