Question

I have a notifications setup which perodically retrieves notifications from a database via an AJAX call.

If notifications are new, then I want to add a jQuery UI “highlight” effect to the notification containing element.

There are lots of these for different notification types.

as the notifications are loaded in, the elements containing the notification data is giving a new class “flashAlert” where required. The function below is then triggered.

function startAlert() { // this function makes alerts flash
    setInterval(function () {
       $('.flashAlert').effect("highlight", {}, 2500);
    }, 2500);    
};

This works, however, if the class “flashAlert” is removed from the element (done by a ‘clear notifications’ function), the effect is still applied.

I know that I could call clearInterval in my “clear notifications” function, but then I have to set up a separate Interval function for every notification rather than a single function like this.

I’ve seen other questions on here with users finding difficulties having the effect working on elements which are added by jQuery, but nothing about removing the effect!

Doing a page reload clears it, but that’s not what I want!

Answer 1

function startAlert(){
    $('.flashAlert').effect("highlight", {}, 2500, startAlert);
}

And when you want it to stop in your clear notifications, simply do:

$('.flashAlert').removeClass("flashalert").stop();