如何使jQuery动画不那么不稳定(视频示例)

我是jQuery和Javascript的初学者。感谢您的阅读!

https://www.youtube.com/watch?v=s-E_VFbRruc这是一个演示我的代码动画到目前为止的视频。正如你所看到的，在我将鼠标移到一个像素和包含该像素的矩形显示之间存在滞后时间。

理想情况下，我希望动画看起来像这样:https://www.youtube.com/watch?v=rqU12MHzO-I，这次是我使用maphilight插件制作的一个例子。但是我不能在我的代码中使用这个插件，因为我想一次显示多个矩形图层。

我用jQuery .show()方法显示矩形(div)，但是当我尝试。show("fast")时，div随机闪烁。

你有什么建议我应该试试吗?

相关代码为:

(我的代码使用了一个名为"demo"的地图，其中添加了许多区域元素(矩形)。在这段代码中，我将每个区域元素转换为CSSdiv，以便能够显示和隐藏它们

            if( $('#demo').length >0 ) { 
                var hoveredElements = [];
                var elementPositions = [];
                $('#demo area').each(function() {
                var offset = this.coords;
                var coordarray = offset.split(",");
                var l = coordarray[0];
                var t = coordarray[1];
                var r = coordarray[2];
                var b = coordarray[3];
                var ident = this.id;
                var w = r - l;
                var h = b - t;      
                var elementDiv = $('<div class="area"></div>')
                    .css({position: 'absolute', left: l + 'px', top: t + 'px', border: 'solid', borderColor: 'green'}).
                    width(w).height(h);
                $("body").append(elementDiv);
                elementDiv.hide();
                elementPositions.push({ 
                    element: elementDiv,
                    top: t, 
                    bottom: b, 
                    left: l, 
                    right: r, 
                    id: ident, 
                });
                }); //end of demo area
                $("body").mousemove(function(e) {
                hoveredElements.forEach( function(item) {
                    item.overlay.hide();
                    item.element.hide();
                });
                hoveredElements = [];
                var xPosition = e.pageX;
                var yPosition = e.pageY;
                for (var ie = 0; ie < elementPositions.length; ie++) { 
                    var id = elementPositions[ie].id;
                        if (xPosition >= elementPositions[ie].left && 
                      xPosition <= elementPositions[ie].right &&
                      yPosition >= elementPositions[ie].top &&
                      yPosition <= elementPositions[ie].bottom) {
                        // The mouse is within the element's boundaries
                            hoveredElements.push({ 
                             overlay: $('#overlay' + id),
                             element: elementPositions[ie].element,
                        });
                         } 
                } 
                hoveredElements.forEach( function(item) {
                    item.overlay.show();
                    item.element.show();
                });
            }); 
        };