Блог

Главная - Вопросы по программированию - как выделить первую строку таблицы на 2 секунды и вернуться в исходное состояние

как выделить первую строку таблицы на 2 секунды и вернуться в исходное состояние

#jquery

#jquery

Вопрос:

У меня есть таблица, в которой, как только я добавляю строку, цвет ее фона меняется, чтобы показать изменения (подсветка будет хорошей). Вот что я делаю 

 $("#tableDg tbody tr:first").css("background-color", "red")

Итак, для того, чтобы задержка сработала, я сделал

 $("#tableDg tbody tr:first").css("background-color", "red").delay(2000).css("background-color", "aqua");

но вместо того, чтобы откладывать, он просто окрашивает цвет bkg в aqua, есть комментарии, что я могу здесь сделать? Спасибо

Ответ №1:

 $("#tableDg tbody tr:first").css("background-color", "red");

setTimeout(function() {
    $("#tableDg tbody tr:first").css("background-color", "aqua");
}, 2000);

Чтобы добавить эффект выделения:

 $("#tableDg tbody tr:first").css("background-color", "red");

setTimeout(function() {
    $("#tableDg tbody tr:first").css("background-color", "aqua").effect("highlight", {}, 3000);
}, 2000);

Или это:

 $("#tableDg tbody tr:first").css("background-color", "red");

setTimeout(function() {
    $("#tableDg tbody tr:first").css("background-color", "aqua");
    $('#tableDg tbody tr:first').effect("highlight", {}, 3000);
}, 2000);

Комментарии:

1. Что вы подразумеваете под «выделить»? Как изменить цвет текста? .css('color','yellow');

2. Я думаю, что выделение — это эффект в jquery, что-то вроде $(this).effect("highlight", {}, 3000);

3. Попробуйте соединить это вместе, я отредактировал свой ответ с примером

4. это работает таким же образом, без изменений. спасибо за ваш ответ 🙂

Ответ №2:

Возможно, это поможет: я добавил атрибут data в строку, чтобы выделить тот, который я хочу, поэтому я назвал его data-id.

  1. Получить исходный цвет фона
  2. Анимировать до цвета выделения
  3. подождите 500 миллисекунд
  4. Анимировать до исходного цвета (исчезать)

  5. Удалите стиль, чтобы таблица стилей могла выполнять свою работу.

     var highlight_color = "#fbec88";
var original_color = $('#myTable tbody tr[data-id="'   id   '"]').css("background-color");

$('#myTable tbody tr[data-id="'   id   '"]')
.animate({
'background-color': highlight_color
}, 'slow', 'swing')
.delay(500)
.animate({
'background-color': original_color
}, 'slow', 'swing', function () { 
                    $('#myTable tbody tr[data-id="'   id   '"]').removeAttr("style"); 
                });

Ответ №3:

Если вам нужна одна задержка, вы должны использовать setTimeout(function(){//code}, timeout);