Timing fadeIn and fadeOut within fadetoggle

HTML

<div id='varbox'>
    <span class="hover">hover in here</span>            
    <div id='varcontents'>
        <br />product_id =$product_id
        <br />owner = $owner
        <br />member_id = $member_id</p>
    </div>
</div><br />
<p id="done"></p>

CSS

div#varbox { 
    height:200px; 
    width:200px; 
    border:1px solid Green; 
    text-align:center;
}
div#varcontents { display:none; }
div#varbox span.hover { width:100%; color:Green; }
p#done { color:Red; }

JavaScript

$(document).ready(function() {
    $("div#varbox").hover(function(){
        var startTime = new Date().getTime();
        $("p#done").text("");                
        $("div#varcontents").fadeToggle(3000, 'linear').promise().done(doDone);
        function doDone() {
            var duration = new Date().getTime() - startTime;
            $("p#done").text("DONE in " + duration + "mS");
        }
    });
});