Question

I have an html table that I am trying to add some animation to with jQuery. I am very close to what I want but have one outstanding issue. I will try to describe what I am doing with as cut-down a version of the table and scripts as possible.

The table is defined as follows;

<table>
  <tbody class="group">
    <tr>First</tr>
    <tr class='slide'><div class='hidden'>Surprise!</div></tr>
  </tbody>
  <tbody class="group">
    <tr>Second</tr>
    <tr class='slide'><div class='hidden'>Surprise!</div></tr>
  </tbody>
  <tbody class="group">
    <tr>Third</tr>
    <tr class='slide'><div class='hidden'>Surprise!</div></tr>
  </tbody>
</table>

The effect I want is for all of the <tr class='slide'> rows to be hidden once the page is loaded and then to slideDown into view when the mouse pointer enters the row above. I want the .slide row to remain in view as long as the mouse pointer remains in either the row above or the .slide row (contained within the <tbody> tags). I then want the .slide row to slideUp out of view when the mouse leaves either of the rows within the <tbody> tags. I have managed to do this successfully with the following code.

<script>

$(function() {
  hideRows();
  setupEventHandlers(); 
});

function hideRows() {
  $("div.hidden").each(function() {
    $(this).hide();
});
};
//The hideRows function is much more complicated in my actual page
//as I have to calculate the div height prior to hiding so it animates
//correctly. That's why I don't just set display:none; in the stylesheet.

function setupEventHandlers() {
  $('.group').mouseenter(function() {
    var tr = $(this).children('tr.slide');
    tr.find("div.hidden").each(function() {
      $(this).slideDown();
    });
  });
  $('.group').mouseleave(function() {
    var tr = $(this).children('tr.slide');
    tr.find("div.hidden").each(function() {
      $(this).slideUp();
    });
});
};
//note that I have to animate the div rather than the tr
//as slidedown and slideup don't work on table rows

</script>

While this works it has the problem that if you run the mouse over multiple rows it sets up an enormous jiggly mess that can run for a long time until all of the animations finish. What I want to do is add a timeout so the animation doesn’t start for a second or so after entering the <tbody>. If the mouse leaves the <tbody> before the animation is triggered it should be cancelled. When the mouse pointer leaves a <tbody> the slideUp effect should also be delayed by the same amount – My hope with this last requirement is that if you move down from one <tbody> to the next the slideDown and slideUp effects will occur at the same time so it just appears that the title row between them is moving up (I hope this makes some sort of sense). I have tried several ways of doing this but have been unsuccessful. My best effort is as follows;

var timer;

function setupEventHandlers() {
  $('.group').mouseenter(function() {
    var tr = $(this).children('tr.slide');
    tr.find("div.hidden").each(function() {
      div = $(this);
      timer = setTimeout("div.slideDown();",1000);
    });
  });
  $('.group').mouseleave(function() {
    var tr = $(this).children('tr.slide');
    tr.find("div.hidden").each(function() {
      clearTimeout(timer);
      div = $(this);
      setTimeout("div.slideUp();",1000);
    });
});
};

This almost works. If I quickly enter then leave a row, no animation occurs. If I enter a row and wait 1 second the next row slides down as planned. If I then exit the row to the side then the hidden row slides up 1 second later as planned. But, if I enter the row below things go wrong. The new row slides into view as expected after 1 second but the old row persists. My assumption is that my timer variable is being unintentionally destroyed. I tried being a bit more specific about the process by having an array of timers and assigning a specific one for each row but this made no difference. Javascript is not my strong suit as you may be able to tell.

Answer 1

OK, I finally solved this (and learned a lot too).

The code as provided works if I replace div with div2 in the mouseleave part of the code. Using the same variable name for up and down resulted in the animation not occurring. The only problem is that if I moused over numerous rows quickly I would still get unexpected results as this one variable name gets overused and abused.

My solution is to provide each .slide row with a unique id like so;

<tr class='slide'><div class='hidden'>Surprise!</div></tr>

I then use this id to generate a dynamic variable name using eval and reference this in a string in setTimeout. My final code looks like this.

var timer;

function setupEventHandlers() {
  $('.group').mouseenter(function() {
    var tr = $(this).children('tr.slide');
    tr.find("div.hidden").each(function() {
      id = this.id;
      eval("divdown_" + id + " = $(this);");
      downstring = "divdown_" + id + ".slideDown();";
      timer = setTimeout(downstring,1000);
    });
  });
  $('.group').mouseleave(function() {
    var tr = $(this).children('tr.slide');
    tr.find("div.hidden").each(function() {
      clearTimeout(timer);
      id = this.id;
      eval("divup_" + id + " = $(this);");
      upstring = "divup_" + id + ".slideUp();";
      setTimeout(upstring,1000);
    });
});
};

and works beautifully (in firefox at least, I’m too scared to try IE yet – I’m going to the gym instead).