title: Jquery Menu simultaneously animated
body: <p>How to animate 2-3 divs simultaneously using jQuery? </p>
  
  <p>My idea is when someone hovers on the menu, a horizontal bar will arise when animate and increases the width, along with the menu with <code>ul</code> <code>li</code> also. </p>
  
  <p>My main problem is how to use the first logo <code>div</code>, then a horizontal bar div, and menu div simultaneously in jQuery.</p>
  
  <pre><code>&lt;header4&gt;
          &lt;div class="row"&gt;
                  &lt;div id="logo2"&gt;
                  &lt;a href="index.html"&gt;&lt;h1&gt;Testing&lt;/h1&gt;&lt;/a&gt;
                  &lt;/div&gt;
               &lt;nav&gt;
                  &lt;ul id="primary-nav" class="sf-menu"&gt;
                  &lt;li&gt;&lt;a href="index.html" class="active"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Services &amp; Products&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Stack Overflow&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Stack Overflow&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Stack Overflow&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Stack Overflow&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;SStack Overflow&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Stack Overflow&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Stack Overflow&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Career&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;!-- END .sf-menu navigation --&gt;
              &lt;div class="clearfix"&gt;&lt;/div&gt;
              &lt;/nav&gt;
              &lt;!-- END nav --&gt;
          &lt;/div&gt;
          &lt;!-- END .row --&gt;
          &lt;/header4&gt; 
  
  &lt;script&gt;
  $("#logo2").hover(function(){
    $("div.header4").animate({
      width: "900px"
    }, 1500 );
  });
  &lt;/script&gt;
  </code></pre>