thay đổi văn bản theo định kỳ trong một khoảng từ một mảng với jquery

Question

Tôi có một khoảng thời gian, ví dụ:

<p>Here is a sentence <span id="rotate">this</span> is what changes</p> 

và tôi muốn các nội dung của khoảng đó để thay đổi mỗi vài phút giữa một danh sách thuật ngữ, vì vậy nội dung có thể thay đổi thành:

<span id="rotate">then</span> 
<span id="rotate">thus</span> 

v.v. Tôi muốn văn bản mờ đi và sau đó văn bản mới sẽ mờ dần.

Làm cách nào tốt nhất để thực hiện điều này thông qua jquery?

Answer 1

Bạn có thể làm một cái gì đó như thế này, lưu trữ các chỉ số hiện hành về các yếu tố xoay sử dụng .data() để hỗ trợ nó nhiều nơi cũng như:

var terms = ["term 1", "term 2", "term 3"]; //array of terms to rotate 

function rotateTerm() { 
    var ct = $("#rotate").data("term") || 0; 
    $("#rotate").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct]) 
       .fadeIn().delay(2000).fadeOut(200, rotateTerm); 
} 
​​​​​​​​​​​​​​​​​​​$(rotateTerm); //start it on document.ready 
​ 

này mất dần các nhiệm kỳ đầu tiên trong, đợi 2 giây, mất dần nó ra , thay đổi văn bản và lặp lại .... chỉ cần điều chỉnh giá trị cho những gì bạn muốn :)

Here's a quick demo so you can see it in action