How to solve the problem with animations and mouse on jQuery?

Question

JavaScript

There is a code

<div class="why-we__block">
            <div class="why-we__block-anim">
                <div class="why-we__image" onmouseover="why_we__description_show(this);" style="">
                     <тут svg, которая много место занимает>
                </div>
                <div class="why-we__description" onmouseleave="why_we__img_show(this);" style="display: none;">
                    <p>Lorem ipsum dolor sit amet, consectetur.</p>
                </div>
            </div>
            <div class="why-we__label"><p>Отзывчивая тех. поддержка.</p></div>
 </div>

The essence of this block is to show hidden content when hovering the mouse. And hide this information if the mouse flew away somewhere.

But only if you quickly move the mouse, then the object remains in one position: i.e. it shows additional information despite the fact that the mouse is somewhere far away

function show_full_service_info(obj){
    $(obj).slideUp(50, function(){
        $(obj).siblings(".service__full-info").slideDown(250);
    }); 
} 
function hide_full_service_info(obj){
    $(obj).slideUp(200, function(){
        $(obj).siblings(".service__short-info").slideDown(100);
    }); 
}

There are several of these elements on the page