Question

So Im just toggling and removing some classes at small intervals – I’m pretty new to JS and JQuery but I’ve done this, which works:

function priceTable() {
    setTimeout(function(){$("#price-table-1").toggleClass("price-table-highlight");  },1000);
    setTimeout(function(){$("#price-table-1").removeClass("price-table-highlight");  },2000);
    setTimeout(function(){$("#price-table-2").toggleClass("price-table-highlight");  },2000);
    setTimeout(function(){$("#price-table-2").removeClass("price-table-highlight");  },3000);
    setTimeout(function(){$("#price-table-3").toggleClass("price-table-highlight");  },3000);
    setTimeout(function(){$("#price-table-3").removeClass("price-table-highlight");  },4000); 
}

However, there seems to be an awful lot of repetition – is there a better way of doing this?

Answer 1

for jQuery animation methods, using the delay method works fine. for other jQuery methods, might I recommend jquery.wait, which works similarly to delay but for all jQuery methods. your code then becomes

function priceTable() {
  $('#price-table-1').wait(1000).toggleClass('price-table-highlight').wait(1000).removeClass('price-table-highlight');
  $('#price-table-2').wait(2000).toggleClass('price-table-highlight').wait(1000).removeClass('price-table-highlight');
  $('#price-table-2').wait(3000).toggleClass('price-table-highlight').wait(1000).removeClass('price-table-highlight');
}