Question

我是jQuery / Javascript的初学者。谢谢你的阅读！

在下面的代码中，我不确定为什么我的叠加文字显示的时间比我的矩形div要长。以下是描述我的意思的视频：

单独的矩形div无缝显示 video

仅仅叠加div更加生涩 video

代码 :(我有一个带有许多区域元素的地图'demo'。我首先将区域元素转换为矩形div，因此我可以使用它们上的show / hide方法。我推动所有矩形div和它们的叠加文本到数组elementPositions。然后我调用mouseover事件处理程序：如果鼠标在一个矩形div包含的像素上，那个div及其叠加层被添加到hoveredElements数组，然后是hoveredElements中的每个div显示。）

if( $('#demo').length >0 ) { 
  $('#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 bc = $(this).attr('att');
    var elementDiv = $('<div class="area"></div>')
        .css({position: 'absolute', left: l + 'px', top: t + 'px', border: 'solid', borderColor: bc }).
        width(w).height(h);

    $("body").append(elementDiv);
    elementDiv.hide();      

    elementPositions.push({ 
        element: elementDiv,
        top: t, 
        bottom: b, 
        left: l, 
        right: r,
    });

}); //end of demo area

$("body").mousemove(function(e) {
    hoveredElements.forEach( function(item) {
        item.element.hide();
    });

    hoveredElements.forEach( function(item) {
        item.overlay.hide();
    });

    hoveredElements = [];

    var clientX = e.clientX;
    var clientY = e.clientY;
    //console.log(clientX,clientY);
    var xPosition = e.pageX;
    var yPosition = e.pageY;
    //console.log(xPosition,yPosition);

    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({ 
                element: elementPositions[ie].element,
                overlay: $('#overlay'+ id),
            });
        } 
    } //end of for loop over all elements


    hoveredElements.forEach( function(item) {
        item.element.show();
    });//end of for loop over all hovered elements

    hoveredElements.forEach( function(item) {
        item.overlay.show();
    });

 }); //end of mousemove function

}; //end of if demo

叠加文字。显示滞后

0 个答案: