我有一个视频托管网站，其中每个视频都有一个缩略图，当您将鼠标悬停在缩略图上时，就会有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秒钟，以便为视频预览提供足够的加载时间

是否有办法消除我没有看到的延迟？