2015-09-15 3 views
0

У меня есть эффект, который я хочу, но я знаю, что он может быть закодирован более эффективно.рефакторинг jquery addClass removeClass

Вот эффект ...

http://brinsterinc.com/fw/dcp/steps_vert.html

А вот JQuery ...

$(document).ready(function() { 
    setTimeout(function(){ 
     $("#1").addClass("vstepCycle").delay(1000).queue(function(){ 
      $(this).removeClass("vstepCycle").dequeue(); 
      }); 
    }, 3000); 
    setTimeout(function(){ 
     $("#2").addClass("vstepCycle").delay(1000).queue(function(){ 
      $(this).removeClass("vstepCycle").dequeue(); 
      }); 
    }, 4000); 
    setTimeout(function(){ 
     $("#3").addClass("vstepCycle").delay(1000).queue(function(){ 
      $(this).removeClass("vstepCycle").dequeue(); 
      }); 
    }, 5000); 
    setTimeout(function(){ 
     $("#4").addClass("vstepCycle").delay(1000).queue(function(){ 
      $(this).removeClass("vstepCycle").dequeue(); 
      }); 
    }, 6000); 
}); 

Пытаясь узнать так что любой совет оценили!

ответ

0

Если вы готовы использовать Jquery UI, то он имеет addClass и другие функции, которые поддерживают duration, так что вы можете сжать весь код в одну или две линии, такие как:

setTimeout(function(){ $("#1").addClass("vstepCycle", 1000).removeClass("vstepCycle",1000) }, 3000);