Question

我有一个小问题。我正在尝试使用jquery开发一个简单的菜单，基于mymenù的模型是here。我尝试开发它，我可以同时播放所有元素的动画，但一次只能播放一个，我不能。以下是我的代码html和js：

JS

$('.menu').hover(
        function () {
            $(".mText",this).stop(true).animate({ top: '70px' }, 400, 'easeOutCubic');
            $(".mText_over",this).stop(true).animate({ top: '0px' }, 500, 'easeOutCubic');
        },
        function () {
            if ((!$('li').hasClass('with_ul')) || (!$('li').hasClass('sfHover'))) {
                $(".mText").stop(true).animate({ top: '0px' }, 400, 'easeInOutCubic');
                $(".mText_over").stop(true).animate({ top: '-70px' }, 400, 'easeInOutCubic');
            }
        }
    );

HTML

<div class="menuHolder">
<nav id="menuV" class="menu">
    <ul id="menu" class="sf-js-enabled">
        <li><a href="#!/page_about">
            <div
            class="mText" style="top: 0px;">
                About Us
            </div>
            <div class="mText_over" style="top: -70px;">
                About 

                Us
            </div>
            </a></li>
        <li class="with_ul"><a
            href="#!/page_portfolio1">
            <div class="mText" style="top: 0px;">Portfolio</div>
            <div class="_arrPl" style="top: 20px;">
            </div>
            <div class="mText_over" style="top: -50px;">Portfolio</div>
            </a>
            <ul class="submenu_1" style="top: 41px; visibility: visible; display: none;">
                <li><a
                    href="#!/page_more">Laystras</a></li>
                <li><a
                    href="#!/page_more">Mausya</a></li>
                <li><a href="#!/page_more"
                    class="last">Leryse</a>
                    <ul
                    class="submenu_2" style="top: 41px;">
                        <li><a href="#!/page_more">aksase</a></li>
                        <li><a href="#!/page_more" class="last">masaysa</a></li>
                    </ul>
                </li>

            </ul>
        </li>
        <li><a href="#!/page_services">
            <div
            class="mText" style="top: 0px;">
                Services
            </div>
            <div class="mText_over" style="top: -70px;">
                Services
            </div>
            </a></li>
        <li><a href="#!/page_tutorials">
            <div
            class="mText" style="top: 0px;">
                Tutorials
            </div>
            <div class="mText_over" style="top: -70px;">
                Tutorials
            </div>
            </a></li>
        <li class="no_bg"><a href="#!/page_mail">
            <div
            class="mText" style="top: 0px;">
                Contacts
            </div>
            <div class="mText_over" style="top: -70px;">
                Contacts
            </div>
            </a></li>
    </ul>
</nav>

Answer 1

也许您可能需要this之类的内容。

.sf-js-enabled {
    height: 20px;
    overflow: hidden;
   /*  background: gray; */
}

.sf-js-enabled li{
    list-style: none;
    display: inline-block;
    /* background: silver; */

}

.sf-js-enabled li > a {
    position: relative;
    top    : -20px;
    transition: all 0.5s ease;
}

.sf-js-enabled li:hover > a {
    top: 0;   
}

将鼠标悬停在其中并将其悬停

1 个答案: