jQueryアニメーションの不自然さを軽減する方法（ビデオの例）

Question

私はjQueryとJavascriptの初心者です。読んでくれてありがとう！

https://www.youtube.com/watch?v=s-E_VFbRrucこれまでの私のコードアニメーションを示すビデオです。あなたが見ることができるように、ピクセル上にマウスを置いたときと、そのピクセルを含む四角形が表示されるときの間に時間差があります。

理想的には、アニメーションをhttps://www.youtube.com/watch?v=rqU12MHzO-Iのようにしたいと思います。今回は、maphilightプラグインを使用して作成した例です。しかし私は一度に多くの矩形のレイヤーを表示したいので、私のコードにそのプラグインを使用することはできません。

jQueryの.show（）メソッドで長方形（divs）を表示していますが、.show（ "fast"）を試してみると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のホバーセレクタが便利です。かなり瞬間的で、javascriptのロジックを待つオーバーヘッドは必要ありません。

このスニペットでは、結果の左上隅にマウスを置くまで、どのようにブロックが表示されないかを確認してください。これはあなたが探しているものの多くであるようです。ホバーがもはや適用されなくなると、ホバーは元の状態に戻ります。再利用可能な単一のクラスをdivに適用することで、必要に応じて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>