title: Navigation width to be increased (slowly) on mouseover
body: <p>I am new to javascript. I have been asked to do something like the navigation show on <a href="http://www.samsung.com/global/galaxys3/feature.html#smartstay" rel="nofollow">http://www.samsung.com/global/galaxys3/feature.html#smartstay</a></p>
  
  <p>I have a class called .container which includes many subclasses. I am require to increase the width of the .menu on mouseover. Currently, during mouseover event, 2 element are affected. Is it possible to change the code so that only the current mouseover element would be affected?</p>
  
  <p>I had heard that tween is able to do the job. Currently using tween.js now.</p>
  
  <p>Below is my code:</p>
  
  <pre><code>        $('.menu').mouseover(function(){
              var i=0;
  
              //case sensitive
              $('.menu').width('50px');
              tweenTA2 = new Tween(new Object(),'xyz',Tween.regularEaseOut,0,100,1);
              var myelem = $(this);
  
              tweenTA2.onMotionChanged = function(event){ 
                  $(this).text('here');
                          setTimeout(function(){
                              i= i+1;
                              if (i &lt; 100)
                              {
  
                                  myelem.width(i);
                                  myelem.css("background-color", "yellow");
                              }
  
  
                          },100);
              };
              tweenTA2.onMotionStarted = function(event){ 
                          $('.menu').width('50px');
              };
              //tweenTA2.onMotionResumed = function(event){
              //  $('.menu').width('50px');
              //};    
              tweenTA2.start();       
  
  
          });
  </code></pre>
  
  <p>I am not sure about tween either (e.g. start, end. duration)</p>
  
  <p>Can you assist in reproducing the effect on the site I posted?</p>