jquery - Hover Animation Not Completed -

here fiddle illustration purposes: http://jsfiddle.net/wvrtl/

html:

    <section class="full-w blue">         <div class="container">             <div class="three"></div>             <div class="two"></div>         </div>     </section>       <section class="full-w red">         <div class="container">             <div class="two"></div>             <div class="three"></div>         </div>     </section> 

jquery

$('.full-w').hover(function() {    margintophero = $(this).find('.two').css("margin-top").replace("px", "");    newmargin = margintophero - 50 + "px";    oldmargin = margintophero + "px";     $(this).find('.two').stop().animate({ 'margin-top': newmargin }, 'fast');    }, function() {    $(this).find('.two').stop().animate({ 'margin-top': oldmargin }, 'fast'); }); 

the expected behavior when hovering on line, yellow rectangle moves up, , moves down original position when mouse leaves line. if move pointer 1 red line another, see yellow box lifts gradually until hits top of line.

i have retrieve margin-top value of element able revert position on mouseleave (the margin-top vary 1 .two another)

i understand tricky, unless totally missing something.

thanks!

the problem saving old value in shared global variable, use .data() api instead save previous valud

$('.full-w').hover(function() {      var margintophero = $(this).find('.two').css("margin-top").replace("px", "");     var newmargin = margintophero - 150 + "px";     $(this).data('oldmargin', margintophero + "px")      $(this).find('.two').stop().animate({ 'margin-top': newmargin }, 'fast'); }, function() {     $(this).find('.two').stop().animate({ 'margin-top': $(this).data('oldmargin') }, 'fast'); });