I have one container div
which contains some children div
members. From time to time, I need to run a custom blinking effects on some of the child div
members. The effect steps are as follows:
- Change font color to Yellow
- Pause for 0.5 secs
- Change background color to yellow and text color to black
- Pause for 0.25 secs
- Change font color to Yellow & background to black
- Pause for 0.25 secs
- Change background color to yellow and text color to black
- Pause for 0.5 secs
- Repeat step 1 to 8
Below is the JavaScript code that I came up using jQuery to achieve the above effect. The code is working perfectly fine, but somehow I feel that this is not an elegant solution and there may be possible issue with how I pass $elements
var
from one function to another.
Is there anything wrong with this approach? How can this code be improved?
function startAnimation($container) {
var $elements = $container.find(".animation");
if ($elements.length) {
$elements.switchClass("mc-ylw-blk", "mc-blk-ylw", 0).show(0).delay(500).promise().done(function () {
$elements.switchClass("mc-blk-ylw", "mc-ylw-blk", 0).delay(250).promise().done(function () {
$elements.switchClass("mc-ylw-blk", "mc-blk-ylw", 0).delay(250).promise().done(function () {
$elements.switchClass("mc-blk-ylw", "mc-ylw-blk", 0).delay(500).promise().done(function () {
startAnimation($container); //Repeat
});
});
});
});
}
}