Question

如何使用jQuery同时动画2-3个div？

我的想法是当有人在菜单上盘旋时，动画会增加水平条并增加宽度，同时还会显示带有ul li的菜单。

我的主要问题是如何在jQuery中同时使用第一个徽标div，然后是水平条形div和菜单div。

<header4>
        <div class="row">
                <div id="logo2">
                <a href="index.html"><h1>Testing</h1></a>
                </div>
             <nav>
                <ul id="primary-nav" class="sf-menu">
                <li><a href="index.html" class="active">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Services & Products</a>
                <ul>
                    <li><a href="#">Stack Overflow</a></li>
                    <li><a href="#">Stack Overflow</a></li>
                    <li><a href="#">Stack Overflow</a></li>
                    <li><a href="#">Stack Overflow</a></li>
                    <li><a href="#">SStack Overflow</a></li>
                    <li><a href="#">Stack Overflow</a></li>
                    <li><a href="#">Stack Overflow</a></li>
                </ul>
                </li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Career</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <!-- END .sf-menu navigation -->
            <div class="clearfix"></div>
            </nav>
            <!-- END nav -->
        </div>
        <!-- END .row -->
        </header4> 

<script>
$("#logo2").hover(function(){
  $("div.header4").animate({
    width: "900px"
  }, 1500 );
});
</script>

Answer 1

为什么不使用CSS？不需要jQuery。

请参阅以下内容：http://meyerweb.com/eric/css/edge/menus/demo.html

Jquery菜单同时动画

1 个答案: