How can I retrieve dynamically the duration of an event? (like mouseenter)

Question

I made an animation with jQuery with mouseenter/mouseleave and the animate() method on a bunch of div's organized like a hand of playing cards.

When I hover on a div, it's moving 20px up. everything is going well so far. But the speed of my animation is linear (50).

What I would like to do is that my animation duration to be equal to the duration of the hover event.

here's my html:

<section>
 <div id="one"></div><!--
 --><div id="two"></div><!--
 --><div id="three"></div><!--
 --><div id="four"></div><!--
 --><div id="five"></div><!--
 --><div id="six"></div>
</section>

the css:

html, body{
    margin:0;
    padding:0;
}
section{
  position:relative;
  margin:0 auto;
  width:400px; 
  height:400px; 
}
div{
    position:absolute;
    display:inline-block;
    width:200px;
    height:200px;
    top:150px;
    background:black;
    border:1px solid grey;
}
#one{
    z-index:50;
    left:0px;
}
#two{
    z-index:49;
    left:40px;
}
#three{
    z-index:47;
    left:80px;
}
#four{
    z-index:46;
    left:120px;
}
#five{
    z-index:45;
    left:160px;
}
#six{
    z-index:44;
    left:200px;
}

and the jQuery :

 $(document).ready(function(){
      $('div').on({
          mouseenter: function(){
              $(this).animate({
                  'top':'-=20px',
              },50); 
          },
          mouseleave:function(){
              $(this).animate({
                  'top':'+=20px',
              },50);
          }    
      });
  });

And the fiddle http://jsfiddle.net/Tender88/5FKUN/2/

I guess I have to replace the current speed by a variable containing dynamically the duration of the mouseenter event but I have no idea how to retrieve that data :(

Any help is greatly appreciated. Thanks :)

Answer 1

Try

$(document).ready(function () {
    var _steps = {
        "mouseenter": [],
        "mouseleave": [],
        "estimate": [],
        "now": []
    };
    $('div').on({
        mouseenter: function (e) {
            _steps.mouseenter.push(e.timeStamp);
            $(this)
                .animate({
                'top': '-=20px',
            }, {
                duration: 50,
                start: function () {
                    console.log(_steps, _steps.estimate, _steps.now)
                },
                step: function () {
                    _steps.now[0] = $.now();
                }

            })
        },
        mouseleave: function (e) {

            $(this)
                .animate({
                'top': '+=20px',
            }, {
                duration: 50,
                step: function () {
                    _steps.now[0] = $.now();
                },
                complete: function () {
                    // see `_steps` object at console
                    console.log(_steps, _steps.estimate, _steps.now)
                }
            });
            _steps.mouseleave.push(e.timeStamp);
            _steps.estimate[0] = (_steps.mouseleave.slice(-1) - _steps.mouseenter.slice(-1));
        }
    });
});

jsfiddle http://jsfiddle.net/guest271314/P5xLh/