Jquery 事件处理程序：鼠标离开延迟反应

我一直试图让框在鼠标进入时展开，在鼠标离开时取消展开。我已经在一定程度上做到了这一点；但是，当我将鼠标悬停在某个项目上，然后缩小浏览范围，然后再次将鼠标悬停在该项目上时，对象不会移回其正确的位置。大约需要十秒钟的时间。。。有人有解决办法吗？网站如下：

以下是我的HTML代码：

<div class="spotlight-item">
<h2>Lorum Ipsum</h2>
<p>Mauris venenatis a justo lobortis elementum. Suspendisse varius urna tristique justo sodales condimentum. Quisque et euismod massa.</p>
<p class="more-details">Quisque imperdiet nibh sed sagittis dignissim. Nullam vel massa nisi. Integer cursus libero eu semper congue. Sed pulvinar vehicula leo, quis vulputate orci. Vestibulum quis diam ipsum. Mauris venenatis a justo lobortis elementum. Suspendisse varius urna tristique justo sodales condimentum. Quisque et euismod massa.</p>
</div>

这是我的JavaScript

$(document).ready(function(){

    // Set Default Viewport Size
    var viewport = $(window).width();

    // Call Functions
    boundingBoxes ();

    // Actions On Window Resize
    $(window).resize(function() {
        viewport = $(window).width();
        for (var i = 0; i < 1; i++) {boundingBoxes ();}

    });

    // Bounding Boxes
    function boundingBoxes () {
        if (viewport >= 760) {
            $(".spotlight-item").on({
                mouseenter: function() {
                    $(this).children().show(600);   
                    $(this).animate({marginTop: "-190px"}, 600);
                },
                mouseleave: function () {
                    $(this).children(".more-details").hide(600);
                    $(this).animate({marginTop: "0px"}, 600);   
                }
            });
        }
        else if (viewport < 760) {
            $(".spotlight-item").off();
        }
    }

});

---

调整大小事件处理程序可以调用一百次。每次调用时，您都要重新绑定新的悬停处理程序。不要将其嵌套在调整大小处理程序中。顺便说一句，您应该使用.stop或.finish方法制作动画，这取决于您正在查找的内容。resize事件处理程序用于使视口变量具有准确的窗口宽度，以便在网站位于移动设备上后，我可以禁用事件处理程序。。。我尝试在resize事件处理程序之外对其进行编程，但该事件处理程序仍然存在于移动设备上。。。。我在我的动画上尝试了.stop和.finish方法，这两种方法都使动画不稳定。。。。

$(document).ready(function(){

    // Set Default Viewport Size
    var viewport = $(window).width();

    // Call Functions
    boundingBoxes ();

    // Actions On Window Resize
    $(window).resize(function() {
        viewport = $(window).width();
        for (var i = 0; i < 1; i++) {boundingBoxes ();}

    });

    // Bounding Boxes
    function boundingBoxes () {
        if (viewport >= 760) {
            $(".spotlight-item").on({
                mouseenter: function() {
                    $(this).children().show(600);   
                    $(this).animate({marginTop: "-190px"}, 600);
                },
                mouseleave: function () {
                    $(this).children(".more-details").hide(600);
                    $(this).animate({marginTop: "0px"}, 600);   
                }
            });
        }
        else if (viewport < 760) {
            $(".spotlight-item").off();
        }
    }

});