How to add animation to current item

[vizz]

Following code of animated menu is working well,little bit, but when mouse pointer is over one list element, items inside all other list elements are animated.

I want to animate, items inside hovered list element only.

if mouse pointer is over about us, animate => div items inside about us list.

e.g. while code is running <li><a href="index1.html"><div class="mText">About us</div></a></li>, this looks like (because of append I used),

<li class="hoverItem">
    <a href="index1.html">
        <div class="mText" style="top: 0px;">About us</div>
        <div class="_area"></div>
        <div class="_overPl" style="bottom: 100px;"></div>
        <div class="_overLine" style="opacity: 0;"></div>
        <div class="mTextOver" style="top: -100px;">About us</div>
    </a>
</li>

My Code
Script

$( "ul.sf-menu > li" ).each(function(){                                      
    var conText = $(this).find('.mText').text();
    $(">a", this).append("<div class='_area'></div><div class='_overPl'></div><div class='_overLine'></div><div class='mTextOver'>"+conText+"</div>");
});


$("ul.sf-menu > li").mouseover(function() {
    $("li").removeClass('hoverItem');
    $(this).addClass('hoverItem');  
});



//How to combine following functions?????????


$( "ul.sf-menu > li" ).mouseover(function() {                                             
    $(".mText").stop(true).animate({top:"160px"}, 600, 'easeOutCubic');
    $(".mTextOver").stop(true).delay(150).animate({top:"50px"}, 500, 'easeOutCubic');
    $("._overPl").stop(true).animate({bottom:"0px"}, 500, 'easeOutCubic');
    $("._overLine").stop(true).animate({opacity:1}, 500, 'easeOutCubic');
}); 

$( "ul.sf-menu > li" ).mouseout(function() {
    $(".mText").stop(true).animate({top:"0px"}, 600, 'easeOutCubic');
    $(".mTextOver").stop(true).delay(20).animate({top:"-100px"}, 400, 'easeOutCubic');
    $("._overPl").stop(true).animate({bottom:"100px"}, 400, 'easeOutCubic');
    $("._overLine").stop(true).animate({opacity:0}, 500, 'easeOutCubic');
});     

HTML

<div class="menuMov">
    <div class="menu">
        <ul class="sf-menu">
            <li><a href="index1.html"><div class="mText">About us</div></a></li>
            <li><a href="index2.html"><div class="mText">Gallery</div></a></li>
            <li><a href="index3.html"><div class="mText">Training</div></a></li>
            <li class="last"><a href="index4.html"><div class="mText">Find us</div></a></li>
        </ul>
    </div>
</div>

CSS

/*--- menu ------*/
.menuMov {
  position: relative;
  width: 100%;
  height: 115px;
  margin: 0 auto;
  margin-top: 0;
  z-index: 10;
}
.menu {
  position: relative;
  z-index: 1;
  display: inline-block;
  text-transform: uppercase;
}
.sf-menu {
  z-index: 3;
  position: relative;
  display: inline-block;
  margin: 15px 0 0;
}
.sf-menu > li {
  position: relative;
  color: #383636;
  display: inline-block;
  float: left;
  height: 115px;
  margin-right: 35px;
}
.sf-menu .last {
  margin-right: 0;
}
.sf-menu > li > a {
  display: block;
  position: relative;
  height: 115px;
  overflow: hidden;
  padding: 0;
}
.sf-menu > li > a:hover {
  text-decoration: none;
}
.sf-menu > li.active > a {
  text-decoration: none;
}
.mText {
  font: 600 15px/15px 'Open Sans', sans-serif;
  font-style: italic;
  color: #545454;
  position: absolute;
  width: 100%;
  z-index: 1;
  text-align: center;
  left: 0;
  padding-top: 50px;
}
.mTextOver {
  font: 600 15px/15px 'Open Sans', sans-serif;
  font-style: italic;
  color: #000000;
  position: relative;
  width: 100%;
  z-index: 3;
  text-align: center;
  top: -100px;
}
._area {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 5;
  left: 0;
  display: block;
}
._overPl {
  position: absolute;
  width: 100%;
  height: 84px;
  bottom: 100px;
  z-index: 2;
  left: 0;
  display: block;
  background: none;
}
._overLine {
  position: absolute;
  width: 100%;
  height: 4px;
  top: 111px;
  z-index: 10;
  left: 0;
  display: block;
  background: #1b1b1b;
  opacity: 0;
}
/*--- menu end ------*/

[wazz]

i didn't read everything in detail, but i bet you're looking for one of these jquery selectors: child, children, siblings, :first-of-type, or something similar. for ex, in the very first code block above, the divs are children of the anchor; the anchor is a child of the li.
hth.

[diafol]

Be an idea if you set up a jsfiddle, so contributors could play with it :)

[vizz]

http://jsfiddle.net/ZtB57/

My code is working on PC but not working in jsfiddle How to add jquery.easing.js I'm using jquery-1.8.3.min.js