JQuery текст загрузки анимации

Question

Попытка сделать текст ... загрузка анимации

вот где я стою: http://jsfiddle.net/aGfct/

я могу получить ... быть добавлены с интервалом 500 мс, но я хочу чтобы удалить их, а затем запустить анимацию за/до завершения загрузки (в основном она может зацикливаться навсегда, и я буду исчезать, когда закончим).

Любая помощь будет отличной.

Спасибо.

_charlie

Answer 1

i = 0; 
setInterval(function() { 
    i = ++i % 4; 
    $("#loading").html("loading"+Array(i+1).join(".")); 
}, 500); 

Если вы хотите изменить строку после того, как 5 говорит, что это после 10 итераций. Это можно сделать так.

i = 0; 
text = "loading"; 
setInterval(function() { 
    $("#loading").html(text+Array((++i % 4)+1).join(".")); 
    if (i===10) text = "start"; 
}, 500); 

Answer 2

Просто добавьте эту строку в конце вашего цикла:

i = (i === 3) ? 0 : i; 

Это просто сокращение для говоря: «если i равно 3, установите его обратно к нулю, иначе оставить его как это'. Это должно начинать цикл заново, пока вы не установите условие выхода.

EDIT: Держись, я фактически не смотрю на то, как вы приложили к . (извините, не может получить jsFiddle запустить что-либо в данный момент)! Если бы вы использовали сброс i, как указано выше, вам действительно нужно установить количество символов ., равное i с каждой итерацией.

EDIT 2: Глядя снова, вы бы даже не нужно принимать i в замыкание, чтобы получить его значение в то время setTimeout будет объявлен, в противном случае вы получите то, что значение это когда setTimeout является выполненный, что непредсказуемо. В принципе, не используйте это решение - используйте Jeff's! ;)

Answer 3

Попробуйте использовать setInterval и так как:

setInterval(function(){ 
    for (i = 1; i <= 3; i++) { 
     setTimeout(function() { 
     $("#loading").append("."); 
     }, i * 500); 
    } 
    $("#loading").html('loading'); 
}, 2000); 

Answer 4

http://jsfiddle.net/paska/aGfct/12/

var originalText = $("#loading").text(), 
    i = 0; 
setInterval(function() { 

    $("#loading").append("."); 
    i++; 

    if(i == 4) 
    { 
     $("#loading").html(originalText); 
     i = 0; 
    } 

}, 500); 

Answer 5

У меня есть решение, очень похожее на roXon, только в моем случае 2 функции, которые я добавил.

1. Просто добавьте пустой elemnt с ID = loadingDots, как промежуток ID = "loadingDots">
2. Добавьте вызов функции в document.ready. Теперь в моем случае мне нужно было отображать точки загрузки на некоторых страницах, но не все. Таким образом, функция будет искать элемент с id = loadDots, и если он не найден, очищается интервал.

Demo in JsFiddle

[HTML]

<!--Just have an element with id=loadingDots--> 
<span style="font-size:42px">Sending<span id="loadingDots"></span></span> 

[JS]

$(document).ready(function(){ 
    /**Call the function in document.ready somewhere*/ 
    showLoadingDots(); 
}); 

Функция

var showLoadingDots = function() { 
    /**If element not found, do nothing*/ 
    if (!$("#loadingDots").length>0) return false; 

    var showDots = setInterval(function(){    
     //Thanks to roXon, StackOverflow 
     var d = $("#loadingDots"); 
     d.text().length >= 3 ? d.text('') : d.append('.'); 
    },300); 
} 

Хоп Это помогает кому-то. Спасибо roXon за идеи.