How to make jQuery animation less jerky (video example)
<p>I am a beginner in jQuery and Javascript. Thank you for reading!</p>

<p><a href="https://www.youtube.com/watch?v=s-E_VFbRruc" rel="nofollow">https://www.youtube.com/watch?v=s-E_VFbRruc</a> This is a video demonstrating  my code animation so far. As you can see there is lag time between when I mouse over a pixel and when the rectangles containing that pixel display.</p>

<p>Ideally I would like the animation to look like this: <a href="https://www.youtube.com/watch?v=rqU12MHzO-I" rel="nofollow">https://www.youtube.com/watch?v=rqU12MHzO-I</a>, this time an example I made using the maphilight plugin. But I cannot use that plugin on my code since I want to display many layers of rectangles at once.</p>

<p>I am showing the rectangles (divs) with the jQuery .show() method, but when I try .show("fast") the divs flicker in and out randomly. </p>

<p>Do you have any advice on what I should try?</p>

<p>The relevant code is:</p>

<p>(My code uses a map called 'demo' with many area elements (rectangles) appended to it. In this piece of code I convert each area element to a CSS div so I am able to show and hide them)</p>

<pre><code>            if( $('#demo').length &gt;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 = $('&lt;div class="area"&gt;&lt;/div&gt;')
                    .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 &lt; elementPositions.length; ie++) { 
                    var id = elementPositions[ie].id;
                        if (xPosition &gt;= elementPositions[ie].left &amp;&amp; 
                      xPosition &lt;= elementPositions[ie].right &amp;&amp;
                      yPosition &gt;= elementPositions[ie].top &amp;&amp;
                      yPosition &lt;= 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();
                });

            }); 

        }; 
</code></pre>