jQuery로 문자열을 통한 속성 이동

Question

내가하려는 것은 텍스트 단락을 만들고 CSS 속성을 적용한 다음 해당 속성을 문자열 전체에 500ms 씩 이동하는 것입니다.

$(document).ready(function(){ 
$("p").css("color","red"); 
}); 

나는, CSS는 한 번에 하나의 단어에 적용하는 것이이 문자열에 199 0에서 점진적으로 이동하는 수의 내가 내 단락에 200 개 단어가 있다고 가정 해 봅시다? 하나의 단어를 빨간색으로, 다음으로 다음 단어로.

Answer 1

당신은 (당신은 또한 CSS를 통해 거기에 몇 가지 전환 효과를 추가 할 수 있습니다) 클래스를 추가하여, 이런 식으로 할 수있는 :

var p = $('.highlight-words') 
 
var words = p.text().split(' '); 
 
var toAppend = []; 
 
$.each(words, function(i, v) { 
 
    toAppend.push('<span>' + v + '</span>'); 
 
}); 
 
p.html(toAppend.join(' ')); 
 
var spans = p.find('span'); 
 
function delayClass(elem, delay) { 
 
\t setTimeout(function() { 
 
    \t elem.prev().removeClass('highlighted'); 
 
    \t elem.addClass('highlighted'); 
 
    }, delay); 
 
}; 
 
var delay = 0; 
 
spans.each(function(i, span) { 
 
\t delayClass($(span), delay); 
 
    delay += 500; 
 
});

.highlighted { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="highlight-words">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

또한 JSFiddle에.