jQuery add class and sleep then remove class

[axes]

I have an image map which has several divs on it as city points. And I wrote a class in css to animate those points' color, so I can add that class through jQuery, wait sometime and remove the class. The goal is to animate those points randomly (add class, wait, remove class at random), but currently I am stuck with waiting before removing the class. I tried different solutions, including those that are posted on this site, but no result. Hre is the code:\[code\] function builtCities() { if ($('body.page-service-map').size()) { var content = $('#region-content .content'), cityDot = '<div class="city-dot"></div>', cities = [ 'moscow', 'saint-petersburg', 'krasnodar', 'rostov-na-donu', 'tyumen', 'omsk', 'irkutsk' ]; for (var i = 0; i < 7; i++) { content.append(cityDot); } $('body.page-service-map .city-dot').each(function (index) { $(this).addClass(cities[index]); }); // animation for (var j = 0; j < cities.length; j++) { function partA(partB) { $('.city-dot').eq(j).addClass('animate'); window.setTimeout(partB, 1000); } partA(partB); function partB() { $('.city-dot').eq(j).removeClass('animate'); } } } } builtCities();\[/code\]