jQuery animación de texto carga

Question

Tratando de hacer un texto ... animación de carga

aquí es donde estoy: http://jsfiddle.net/aGfct/

puedo conseguir el ... que se añade a intervalos de 500 ms, pero entonces yo quiero para eliminarlos y luego iniciar la animación/hasta que se complete la carga (básicamente, puede repetir el ciclo para siempre, y desapareceré una vez hecho).

Cualquier ayuda sería genial.

Gracias.

_charlie

Answer 1

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

Si desea cambiar la cadena después de 5 dice, eso es después de 10 iteraciones. Esto se puede lograr así.

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

Answer 2

Apenas añada esta línea al final de su bucle:

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

Eso es sólo un atajo para decir 'si i es igual a 3, configurarlo de nuevo a cero, de lo contrario dejarlo como es'. Eso debería iniciar de nuevo tu ciclo hasta que establezcas una condición de salida.

EDITAR: Un momento, yo en realidad no ver cómo se les añade la . (lo siento, no puede conseguir jsFiddle para ejecutar nada por el momento)! Si tuviera que usar el reinicio i como se indica anteriormente, realmente necesitaría establecer el número de caracteres . igual a i con cada iteración.

EDIT 2: Mirando de nuevo, tendría siquiera necesita tomar i en un cierre para obtener su valor en el momento de la setTimeout se declararon , de lo contrario obtendrá cualquier valor que es cuando setTimeout es ejecutado, que es impredecible. Básicamente, no use esta solución, ¡use Jeff's! ;)

Answer 3

Trate de usar setInterval también tan parecida:

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

Tengo una solución muy similar a roXon, solo en mi caso 2 funciones que he agregado.

1. simplemente añada una elemnt en blanco con id = loadingDots, como span id = "loadingDots">
2. Añadir la llamada de función en document.ready. Ahora en mi caso necesitaba mostrar los puntos de carga en algunas páginas, pero no en todas. Entonces, la función buscará el elemento con id = cargaDots, y si no se encuentra, borrará el intervalo.

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(); 
}); 

La función

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); 
} 

Hop e ayuda a alguien Gracias roXon, por ideas.