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（＆＃34; fast＆＃34;）时，div会随机闪烁。

您对我应该尝试的内容有什么建议吗？

相关代码是：

（我的代码使用了一个名为＆＃39; demo＆＃39;附加了许多区域元素（矩形）的地图。在这段代码中，我将每个区域元素转换为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逻辑的开销。

请注意，在此片段中，如果在结果的左上角将鼠标悬停在块上，则块是如何不可见的。这似乎更像是你在寻找什么。当不再应用悬停时，它会恢复原始状态。通过将单个可重用的类应用于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>

如何使jQuery动画不那么生涩（视频示例）

1 个答案: