jquery - 使用滑动切换或动画从右向左滑动

Question

slideToggle过去，当我需要菜单从上到下滑动时，我设法让我的代码正常工作。但现在我需要从右向左滑动我的菜单。所以我决定采用这种.animate方法。

我已经尝试过了，但它不能完全工作：

    $(MENU_BUTTON).click(function() {
        $(MENU_ID).animate({ width:'245' }, 600);
    });

它确实从右向左移动，但只移动一次，然后就卡住了。另外，我也希望它可以滑入。我怎样才能做到这一点？

Answer 1

所以第一次，你从左到右设置动画，下一次，你从右到右设置动画？如果我理解正确，您希望隐藏菜单，然后当按下按钮时，菜单从左到右滑动可见。下次按下按钮时，它会从右向左向后滑动。这正是代码所做的，除了隐藏菜单。

$(MENU_BUTTON).click(function() {
    var right = $(MENU_ID).hasClass('right');
    $(MENU_ID).toggleClass('right');
    // If you would like to hide/show it too.
    // Change the 0 to 0-$(MENU_ID).outerWidth();
    /* if (right) {
        setTimeout(function () {$(MENU_ID).hide();}, 600);
    } else $(MENU_ID).show(); */
    $(MENU_ID).animate({ width:(right?0:245) }, 600);
});

Answer 2

试试这个小提琴

HTML

<div class="menu">
    <ul class="upper">
        <li><a href="" title="">Dynamic item 1</a>

            <ul class="inner">
                <li> <a href="">Subitem 1 of 1</a>

                </li>
                <li> <a href="">Subitem 2 of 1</a>

                </li>
            </ul>
        </li>
        <li> <a href="">Static item</a>

        </li>
        <li><a href="">Dynamic item 2</a>

            <ul class="inner">
                <li><a href="">Subitem 1 of 2</a>

                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

.menu {
    width: 150px;
    float: right;
    position: relative;
}
.menu ul li {
    margin-bottom: 1px;
}
.menu ul.upper li a {
    width: 150px;
    background-color: #000;
    color: #FFF;
    text-decoration: none;
    display: block;
    padding: 7px 10px;
    text-align: left;
    font-weight: bold;
}
.menu ul.inner {
    position: absolute;
    right: 160px;
    z-index: 1000;
    display: none;
    width: 150px;
    right: 170px;
}
.menu ul.inner li a {
    width: 150px;
    background-color: #3D6AA2;
    color: #FFF;
    text-decoration: none;
    display: block;
    padding: 7px 10px;
    text-align: left;
    font-weight: bold;
}

JS

$('.upper li').each(function() {
    $(this).find('ul.inner').css({top: $(this).offset().top})
});

$('.upper li').hover(function () {
    $(this).find('ul.inner').stop(true, true).animate({
        width: "toggle"
    }, {
        queue: false,
        duration: 250
    });
});