Задержка между Hide () и Show () в JQuery

Question

У меня есть веб-сайт с видеохостингом, где у каждого видео есть миниатюра и 4-секундный предварительный просмотр видео при наведении миниатюры.

Код ниже работает нормально:

$('div.video-previews').hover(function () {
        //mousein
        var previewVideo=$(this).find('.preview-video');
        var previewImage=$(this).find('.preview-image');
        var url=previewVideo.data('previewurl');
        var poster=previewVideo.data('poster');
        previewVideo.html('<video id="asd" autoplay loop muted poster="'+poster+'" src="'+url+'"></video> ');
        previewImage.hide();
        previewVideo.show();
    }, function () {
        //mouseout
        var previewVideo=$(this).find('.preview-video');
        var previewImage=$(this).find('.preview-image');
        previewVideo.html('');
        previewVideo.hide();
        previewImage.show();
    });

Проблеманаходится здесь:

previewImage.hide();
previewVideo.show();

При наведении на миниатюру изображения оно скрывается, но остается пустым до воспроизведения видео для предварительного просмотра, так как для предварительного просмотра требуется некоторое время для загрузки.

Я попробовалприведенный ниже код, чтобы избавиться от задержки пробела, но он просто загрузит видео под миниатюрой:

previewImage.delay(1000).fadeOut('slow');
previewVideo.show();

Код должен ждать 1 секунду после наведения, чтобы у предварительного просмотра видео было достаточно времени для загрузки

Есть ли способ избавиться от этой задержки, которую я не вижу?