Задержка () связана с переупорядочением строк таблицы

Question

У меня есть простой скрипт для изменения порядка страниц для cms.Он основан на переупорядочении строк таблицы с помощью jQuery.Теперь проблема в том, что я хочу удалить класс подсветки из полной строки с задержкой.Он игнорирует delay () и сразу удаляет его.

Идея состоит в том, что при наведении курсора на строку он добавляет к ней класс cell_rollover.Когда вы нажимаете стрелку вверх / вниз, класс остается в этой строке, показывая, что строка перемещена.Поэтому примерно через 200 миллисекунд он должен удалить класс.Это не ..

Код для стрелок:

$(".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');
});

ПРИМЕЧАНИЕ. Класс cell_rover добавляется в строку с помощью сценария jQuery:

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

Почему это происходит и как это исправить?

РЕДАКТИРОВАТЬ Решение моей общей идеи заключается в форме выделения эффекта jquery: http://jsfiddle.net/sZdre/1/ Однако все еще пытаюсьвыяснить, почему задержка не работает так, как должна ..

Answer 1

задержка очень менее близка к незаметной невооруженным глазом. Попробуйте

.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

обновление

$(".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 2

Добился желаемого поведения с 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);

Я полагаю, что delay() не работает, потому что вы, вероятно, используете tablesorter.jquery.js.Если это так, то у tableorter есть метод с именем delay(), который переопределяет метод jQuery delay().

Answer 3

Это очень поздно, так как я обнаружил, что этот пост ищет что-то еще.

Если вы все еще работаете над этим и у вас есть проблемы, вы должны заглянуть в очередь.RemoveClass не является частью очереди, и вам нужно добавить его в очередь, чтобы задержка сработала, в противном случае он просто удаляет класс, не дожидаясь определенного времени.

$(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();
});

Этот пример наиболее целесообразенмне.Я надеюсь, что это поможет вам, так как я сейчас прохожу аналогичную проблему, и я уже решил эту проблему несколько минут назад:)

Answer 4

Итак, оригинальная идея выделить строку, которая только что была переупорядочена, решена: http://jsfiddle.net/sZdre/1/

Ошибка задержки еще не выяснена ..