Hover in and Hover out menù

我有一个小问题。我试图开发一个简单的菜单与jquery，基于我的模型menù在这里。我试着去开发它，我可以同时播放所有元素的动画，但一次只能播放一个，我做不到。以下是我的代码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');
            }
        }
    );

<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>