Javascript 基于mouseenter函数的Jquery视频延迟

我有一个视频缩略图效果，当用户将鼠标悬停在视频显示的图片上并开始播放时。它工作得很好，但当我尝试应用延迟方法来显示视频时，它不能正常工作

$(document).on('mouseenter', '.img-video', function(e) {
    $(this).hide();
  $(this).next().trigger('play').show();

  $(this).next().mouseout(function() {
        $(this).hide().trigger('pause')[0].currentTime = 0;
    $(this).prev().show();
    });
})

这里的JSFIDLE示例

感谢您的建议

如果悬停非常快，请使用命名超时函数并清除它。如果悬停时间较长，则显示视频

$document.on'mouseenter'，'img video'，functione{ var image=$this； var imageTimer=window.setTimeoutfunction{ image.data'imageTimer'，空； image.hide； 图像。下一步。触发“播放”。显示； }, 2000; 数据'imageTimer'，imageTimer； image.next.mouseoutfunction{ image.next.hide.trigger'pause'[0].currentTime=0； 图像显示； }; }; $document.on'mouseleave'，'img video'，functione{ var image=$this； var imageTimer=$this.data'imageTimer'； 如果imageTimer！==null{ window.clearTimeoutimageTimer； } }; .集装箱{ 边缘顶部：20px； } .样品{ 显示：无； } 上校{ 位置：相对位置； } .样品{ 位置：绝对位置； 顶部：0px； 左：0px； 宽度：100%； 身高：100%； 对象匹配：填充； z指数：1； } 没有视频支持 没有视频支持

---

延迟适用于什么？延迟显示视频谢谢你的建议，脚本很好，但当我尝试悬停太快时会中断。非常好的一点，我已经使用超时功能更新了我的答案。您必须进行一些css更改，以便视频显示在与第二个图像相同的位置。否则它会再次破裂。非常感谢你，雷。现在，它的工作完美和顺利。