Delay() bugged on table row reorder

Question

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 1

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

Answer 2

the delay is very less close to unnoticeable with the naked eye try

.delay(2000)

2000 = 2 seconds

duration: An integer indicating the number of milliseconds to delay execution of
          the next item in the queue.

jquery delay

update

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

Answer 3

So the original idea, to highlight the row that just got reordered is solved: http://jsfiddle.net/sZdre/1/

The delay bug is yet to figure out..

Answer 4

Achieved desired behaviour with window.setInterval()

$element.addClass('cell_rollover');
window.setTimeout(() => $element.removeClass('cell_rollover'), 500);
window.setTimeout(() => $element.addClass('cell_rollover'), 1000);
window.setTimeout(() => $element.removeClass('cell_rollover'), 1500);

I suppose that delay() is not working because you probably use tablesorter.jquery.js. If that is the case, tablesorter has method called delay() that overrides jQuery delay() method.