如何讓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（「快速」）時，div隨機閃爍。

你對我應該試試的建議有什麼建議嗎？

相關的代碼是：

（我的代碼使用一個名爲「演示」與許多區域要素（矩形圖）追加到它在這段代碼我每個區域元素轉換爲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>