Подсветка, затем затухание подсветки, для элементов списка, динамически добавляемых в список

Question

У меня есть неупорядоченный список на странице. Когда эта страница обновляется через Ajax, могут появиться новые элементы списка, которые будут динамически добавлены в неупорядоченный список. Когда будут добавлены новые элементы списка, я хотел бы выделить эти новые элементы списка, но затухание выделится через указанное время.

Я пробовал анимировать и эффект выделения jquery, но не нашел нужной смеси, чтобы получить желаемый результат. Что я делаю сейчас, это вызываю функцию после динамического добавления элемента списка, чтобы попытаться добавить класс выделения, а затем удалить этот класс, но это также не работает.

Элементы списка генерируются и добавляются в неупорядоченный список через PHP.

Как бы я начал динамически выделять новые элементы списка после того, как они были динамически добавлены в неупорядоченный список, но затем исчезать, когда эта подсветка исчезла?

Желаемый результат, который я ищу, похож на поведение твиттер-фида Scoopler, текст ссылки

Answer 1

var colorStr = '#DDDDFF'; // color of highlight
$("li.new").each(function (i,x) {
    $(this).css("background-color",colorStr);
    setTimeout(function(){
        $(x).css("background-color","#ffffff"); // reset background
        $(x).effect("highlight", {color: colorStr}, 3000); // animate
    },3000);
});

Протестировано, я думаю, что это делает то, что вы хотите (то есть, он держит дисплей в течение 3 секунд, а затем дает 3 секунды затухания.

Answer 2

Как насчет jQuery livequery плагин + эффект выделения (при условии, что все li в ul с id ulcontainer). Что-то в этом роде должно работать.

var doIt = function() {};
$(document).ready(function() {
    // doIt empty so no highlight on first page load
    $('#ulcontainer > li').livequery(doIt);
    // now set doIt to something useful
    doIt = function() { $(this).effect("highlight", {}, 3000); };
});
// do ajax and add li's to ul#ulcontainer

Answer 3

А как насчет двухэтапной последовательной анимации?

1) Анимация выделения 2) Анимация затухания

Делайте это последовательно, а не параллельно.