FSS FSS - 2 months ago 15x
jQuery Question

How to make jQuery animation less jerky (video example)

I am a beginner in jQuery and Javascript. Thank you for reading!

https://www.youtube.com/watch?v=s-E_VFbRruc 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.

Ideally I would like the animation to look like this: https://www.youtube.com/watch?v=rqU12MHzO-I, 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.

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

Do you have any advice on what I should try?

The relevant code is:

(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)

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'}).

element: elementDiv,
top: t,
bottom: b,
left: l,
right: r,
id: ident,

}); //end of demo area

$("body").mousemove(function(e) {
hoveredElements.forEach( function(item) {

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
overlay: $('#overlay' + id),
element: elementPositions[ie].element,

hoveredElements.forEach( function(item) {




I tend to try and rely on CSS for hiding and showing content whenever possible. For example, the css hover selector might be useful here. It's pretty instantaneous, and doesn't require the overhead of waiting on javascript logic.

Notice in this snippet how the blocks are not visible until you run your mouse over them in the top left corner of the results. This seems to be more of what you're looking for. When hover is no longer being applied, it resumes it's original state. By applying a single, reusable class to your divs, the css can be applied individually to each div - and only that div - as it becomes necessary. I this case, "necessary" is on hover of that div at that time.

div {
  position: aboslute;
  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>