css - jQuery - find out :hover-styles -

i have div grows on hover. but: applied css-transition 200ms.

now, if use jquery width()-function on hover() wrong value because of animation. need hover-width in endstate at exact hover-time, not @ end (that's why settimeout() doesn't solve problem).

is possible :hover-style is?

html

<div id="parent">     <div id="grows"></div> </div><br><br><br><br> <span id="width"></span> 

css

div#parent {     width: 100px;     height: 100px; }  div#grows {     width: 100%;     height: 100%;      background-color: black;      -webkit-transition: 0.2s ease;     -moz-transition: 0.2s ease;     -ms-transition: 0.2s ease;     -o-transition: 0.2s ease;     transition: 0.2s ease; }  div#grows:hover {     width: 150%;     height: 150%; } 

and js:

$(document).ready(function() {     $('div#grows').hover(function() {         var width = $(this).css('width')); // 100px should 150px!     }); }); 

here jsfiddle: http://jsfiddle.net/v15h652h/

edit: maybe it's not clear enough: need width defined in :hover-style at exact hover-time, not @ end, it's late.

browsers have events allowing handle states of css3 transition (or animation). can use transitionend 1 wait transition finished execute callback:

$(document).ready(function() {    $('div#grows').hover(function() {        $(this).on('webkittransitionend otransitionend otransitionend mstransitionend transitionend', function() {        $(this).off('webkittransitionend otransitionend otransitionend mstransitionend transitionend');        $('#width').html($('#width').html() + ' ' + $(this).css('width'));      });    });  });

div#parent {    width: 100px;    height: 100px;  }  div#grows {    width: 100%;    height: 100%;    background-color: black;    -webkit-transition: 0.2s ease;    -moz-transition: 0.2s ease;    -ms-transition: 0.2s ease;    -o-transition: 0.2s ease;    transition: 0.2s ease;  }  div#grows:hover {    width: 150%;    height: 150%;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>  <div id="parent">    <div id="grows"></div>  </div>  <br>  <br>  <br>  <br>  <span id="width"></span>

ps: personnally prefer using simple .on() event handler .off() remove rather danko's .one() because .one() execute once each event type triggers (particularly, chrome, executed twice)