javascript - 如何使 jQuery 动画不那么生涩(视频示例)

Question

我是 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”的 map ，其中附加了许多区域元素(矩形)。在这段代码中，我将每个区域元素转换为 CSS div，以便能够显示和隐藏它们)

            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();
                });

            }); 

        }; 

Answer 1

只要有可能，我倾向于尝试并依赖 CSS 来隐藏和显示内容。例如，CSS 悬停选择器在这里可能很有用。它非常即时，并且不需要等待 JavaScript 逻辑的开销。

请注意此代码片段中的 block ，直到您将鼠标移到结果左上角的 block 上时才可见。这似乎更符合您的要求。当不再应用悬停时，它会恢复到原始状态。通过将单个可重用的类应用于您的 div，CSS 可以单独应用于每个 div - 并且仅应用于该 div - 在需要时。在这种情况下，“必要”当时悬停在该 div 上。

div {
  position: aboslute;
  top:0px;
  left: 0px;
  height: 30px;
  width: 60px;
  background: white;
  border: none;
  display: block;
  }

.rect:hover {
  background: blue;
  border: 1px solid black;
}

<div class='rect' ></div>
<div class='rect' ></div>
<div class='rect' ></div>