Kalle H. Väravas Kalle H. Väravas - 11 days ago 7
jQuery Question

Delay() bugged on table row reorder

I have a simple script to change pages order for a cms. It is based on reordering table rows with jQuery. Now the issue is, that I want to remove the highlight class from the full row with a delay. It ignores the delay() and removes it right away.

The idea is, that when you hover over a row, it will add cell_rollover class to it. When you click on a up/down arrow, then the class remains to that row -- showing you, that the row moved. So after about 200 milliseconds, it should remove the class. It doesn't..

The code for the arrows:

$(".listtable_up, .listtable_down").click(function() {
var row = $(this).parents("tr:first");
if ($(this).is(".listtable_up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
row.delay("200").removeClass('cell_rollover');
});


NOTE: The cell_rover class is being added to the row with a jQuery script:

$(".listtable tbody td").hover(function () {
$(this).closest('tr').addClass('cell_rollover');
}, function () {
$(this).closest('tr').removeClass('cell_rollover');
});


Why does this happen and how to fix it?

EDIT
Solution to my general idea is in the form of jquery effect highlight: http://jsfiddle.net/sZdre/1/
However, still trying to figure out, why the delay isn't working like it should..

Answer

This is extremely late as I found this post looking for something else.

If you are still working on this and having problems, you should look into the queue. The removeClass is not part of the queue and you need to add it to the queue to make the delay work, otherwise it just removes the class without waiting the specific time.

$(document.body).click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},2000);
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  });
  $("div").animate({left:'-=200'},500);
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  });
  $("div").slideUp();
});

This example made the most sense to me. I hope that helps you as I am currently moving through a similar issue and I already solved one like this a few minutes ago :)