jquery changement temporisé de la classe d'articles

Question

Est-il possible de changer une classe d'éléments ou un ID en fonction d'un type de temporisateur? Tous les 1500ms il aller à hey-il-1, puis plus tard 1500ms hey-il-2 .. etc .. quelque chose que je pourrais peut-être contrôler le nombre des intervalles, il passe par ..

• hey-il
• hé-y-1
• hé-y-2
• hé-y-3
• (retour au début) hé-là
• etc

Merci

Answer 1

Une fonction de plug-in en tant que tel vous permettra de faire ce que vous voulez:

jQuery.fn.rotateClasses = function(classes, interval, max) { 
    var currentRotation = 0; 
    var timer = null; 

    var rotateFn = (function() { 
      var currentClass = currentRotation % classes.length; 

     var previousClass = currentClass - 1; 
     if(previousClass == -1) previousClass = classes.length - 1; 

     this.addClass(classes[currentClass]).removeClass(classes[previousClass]); 

     currentRotation += 1; 

      if(max > 0 && currentRotation >= max) clearInterval(timer); 
    })(); 

    timer = setInterval(rotateFn, interval); 

    return this; 
}; 

Ensuite, vous pouvez simplement l'appeler en utilisant les éléments suivants:

$('#mydiv').rotateClasses(["class1", "class2", "class3"], 1000, 20); 

simplement modifier les paramètres comme tu souhaites. Le premier paramètre est un tableau de classes à faire pivoter, le second est l'intervalle pour les faire pivoter et le troisième est le nombre maximum d'itérations. S'il est défini sur 0, il itère sur ad-infinitum.

Answer 2

Voir:

setTiemOut 
setInternal 

var pp = 0; 

jQuery("#id").html(jQuery("#id").html() + "<div>hey there"+(pp++)+"</div>"); 

Answer 3

Je suggère de ne pas modifier l'ID de l'élément - à la place pour aller "frame1/frame2/frame3" classes.

$(function() { 
    var $target = $("#hey-there"); 
    var classes = ['frame0', 'frame1', 'frame2', 'frame3']; 
    var current = 0; 

    setInterval(function() { 
    $target.removeClass(classes[current]); 
    current = (current+1)%classes.length; 
    $target.addClass(classes[current]); 
    }, 1500); // 1500 ms loop 
});