Add class on click and then remove class on delay (timeout function)

Question

I'm using jimdo but i have a head area where i be able to change all codes and everything works fine but this cool timeout feature. Any help would be great!

This is my code which adds a class to an animated svg image which status is display:none. With a click on a download button the svg image changes to display:block and runs 3 times and fades out after 3 second. So far so good. What i want is that the added class "s-dwlnd" will be removed after the svg fades out. Exactly after 3 seconds to be correct :) ... Is there a way to do this? To add a working timeout function to my existing code? Not all codes working with Jimdo :(

$( document ).ready(function() {
$( ".dwlnd-trg" ).click(function() {
    $( ".dwlnd" ).addClass( "s-dwlnd" );
});});

Answer 1

Yes, something like this should work:

$( document ).ready(function() {
    $( ".dwlnd-trg" ).click(function() {
        $( ".dwlnd" ).addClass( "s-dwlnd" );

        setTimeout(function() {
            $(".dwlnd").removeClass("s-dwlnd");
        }, 3000); // Delay of 3 seconds
    });
});