JQUERY, сравните два текстовых блока, а затем анимируйте только новый текст

Question

У меня есть два блока текста

Текстовый блок 1 - в данный момент отображается на странице: "АХД Hd ahaSdjdajs dadjs Jásd adskadskl1lksad klasd klasd АСС АХД Hd ahaSdjdajs dadjs Jásd adskadskl1lksad klasd klasd АСС АХД Hd ahaSdjdajs dadjs Jásd adskadskl1lksad klasd klasd АСС АХД Hd ahaSdjdajs dadjs Jásd adskadskl1lksad klasd klasd АСС"

Но теперь Блок 1 на бэкэнд: «ЭН Hd ahaSdjdajs dadjs Jásd adskadskl1lksad klasd klasd АСС АХД Hd ahaSdjdajs dadjs Jásd adskadskl1lksad klasd klasd АСС АХД Hd ahaSdjdajs dadjs Jásd adskadskl1lksad klasd klasd АСС АХД Hd ahaSdjdajs dadjs Jásd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd DSA АХД Hd ahaSdjdajs dadjs jasdadskadskl1lksad klasd klasd DSA АХД Hd ahaSdjdajs dadjs Jásd adskadskl1lksad klasd klasd DSA АХД Hd ahaSdjdajs dadjs Jásd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd DSA АХД Hd ahaSdjdajs dadjs jasdadskadskl1lksad klasd klasd DSA АХД Hd ahaSdjdajs dadjs Jásd adskadskl1lksad klasd klasd DSA АХД Hd ahaSdjdajs dadjs Jásd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd АСС АХД Hd ahaSdjdajs dadjs Jásd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd АСС АХД Hd ahaSdjdajs dadjs Jásd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd АСС АХД Hd ahaSdjdajs dadjs Jásd adskadskl1lksad klasd klasd АСС "

Я бы хотел обновить оригинальный Блок 1, который находится на странице, с Блоком 2, который находится на сервере, до страницы.

И я хотел бы добавить, а не прошивать весь блок. Так что только новый материал высвечивается.

Есть идеи, как это сделать в JQUERY?

Answer 1

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

Старый контент находится в диапазоне с классом «старый». Новый контент размещается в промежутке с классом "new".

Посмотри на это в действии: http://jsfiddle.net/P2T8Q/

HTML

<span id="page">Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa</span>

CSS

​.new {
    background: yellow;
}​
​

JQuery

var backend = "Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasdadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasdadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa";

var page = $('#page').text();

backend = backend.replace(page, function(str){ return '<span class="old">' + str + '</span><span class="new">' });

$('#page').html(backend + '</span>');

---

EDIT:

Если вы хотите избежать слинга строк, сделайте следующее:

http://jsfiddle.net/P2T8Q/1/

JQuery

var backend = "Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasdadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasdadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa";

var page = $('#page').text();

var regex = new RegExp('^(' + page + ')(.+)');

backend.replace(regex, function(str,p1,p2){var old = $('<span class="old" />').text(p1); var updated = $('<span class="new" />').text(p2); $('#page').empty().append(old).append(updated); });