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

试试这个fiddle

<强> 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
    });
});

使用幻灯片切换或动画从右向左滑动

2 个答案: