-1

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

我已经尝试过了,但它不能完全工作:

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

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

4

2 回答 2

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);
});
于 2013-08-01T15:18:43.040 回答
1

试试这个小提琴

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
    });
});
于 2013-08-01T18:39:04.433 回答