div mouseenter() or hover(), delay(), fadeIn(), multiple div entry in less than delay time jQuery

Question

I am trying to solve this up with no success. I already tried multiple codes adjustment. The thing is. I got a div when div mouseenter() it will increase in size and css for another div will change after delay. When mouseleave().It will all set as on beginning. This all works fine. Problem is that when you enter the same div multiple times in period less than delay time (let's say 2x in 500ms), it will show the inside div and leave it seen, even when the mouse is out of div. Please, can you suggest a possibility to make it work it out? Here is a working fiddle with 2 possibilities which I make it work, with no success to mentioned problem. Thanks for any suggestions.
PS: Already tried with if() {(div).width() > 110} with no success as well, its always open

https://jsfiddle.net/spanwair/1xzvq55x/

$( ".levaruka" ).hover(function() {
    $(".insidelevaruka").stop(true, true).each(function() {
        setTimeout(function() { 
            $(".insidelevaruka, .e1").fadeIn();                
    }, 600);
    });
    $(this).css({"width": "350px", "height": "350px"});}, function() {
    $(".insidelevaruka").css({"display":"none"});
    $(this).css({"width": "100px", "height": "100px"});
    $(".e1").stop(true, true).css({"display":"none"});
    });


  $(".pravaruka").mouseenter(function() {
    $(".insidepravaruka").delay(600).fadeIn();});
       $(".pravaruka").mouseleave(function() {
    $(".insidepravaruka").hide();});

Answer 1

https://jsfiddle.net/amke9jLh/

$( ".levaruka" ).hover(function() {

    $(".insidelevaruka").attr("hover",1);

    $(".insidelevaruka").finish(true, true).each(function() {
        setTimeout(function() { 
        if($(".insidelevaruka").attr("hover")==1){
          $(".insidelevaruka").fadeIn();
            $(".e1").fadeIn();
            }

    }, 1000);
    });
    $(this).css({"width": "350px", "height": "350px"});
}

the settimeout sometimes triggers late so its not checking if the hover is still on before showing data.

I have added an attribute on the insidelevaruka. called hover which is set to one and resets on the second part

function() {

    $(".insidelevaruka").attr("hover",0);
    $(".insidelevaruka").css({"display":"none"});
    $(this).css({"width": "100px", "height": "100px"});
    $(".e1").stop(true, true).css({"display":"none"});

});

  $(".pravaruka").mouseenter(function() {
    $(".insidepravaruka").delay(600).fadeIn();
  });
$(".pravaruka").mouseleave(function() {
    $(".insidepravaruka").hide();

}

it seems to work properly now please check