When the click event occurs, add a class. After a delay using a timeout function, remove the added

I am currently using Jimdo and I have a section where I can edit all the codes, which is working fine except for one feature. Any assistance would be greatly appreciated!

Here is the code that adds a class to an animated SVG image with its status set as display:none. When a download button is clicked, the SVG image changes to display:block, runs 3 times, and then fades out after 3 seconds. Everything seems to be working well until this point. However, what I want is for the added class "s-dwlnd" to be removed once the SVG finishes fading out - specifically after 3 seconds. Is there a way to achieve this by adding a timeout function to my existing code? Unfortunately, not all codes are compatible with Jimdo :(

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

Answer №1

Sure, you can use the following code to achieve that:

$( document ).ready(function() {
    $( ".download-trigger" ).click(function() {
        $( ".download" ).addClass( "show-download" );

        setTimeout(function() {
            $(".download").removeClass("show-download");
        }, 3000); // Wait for 3 seconds
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Webpack failing to bundle a custom JavaScript file

Here is the structure of my directory: Root -dist -node_modules -src --assets --css --js --scss --index.js --template.html --vendor.js package-lock.json package.json postcss.config.js tailwind.config.js common.config.js development.config.js production.co ...

Vuejs error: Attempting to access properties of undefined

In my Vue table, I have select options. However, an error occurs when a group is not associated with a machine, which should not happen. The goal is for only "-" to appear in this case. This error is logged in the console and causes the DataTable not to di ...

What is the best way to keep tab content fixed when switching?

I've successfully implemented tab switching, but I need to make the content fixed. How can I achieve this so that no matter the length of the content, it remains fixed in its position when switching tabs? The current issue is that when the content is ...

Is it possible to save jQuery plugin initialization settings for future use?

Is it possible to save a default set of settings for a lightbox jQuery plugin, including options and callback functions, in a variable or array that can be referenced later in different contexts with varying configurations? For example, could I initially ...

Does anyone have a solution for resetting the ID numbers in a flatlist after removing an item from it?

As the title suggests, I am facing an issue with the following scenario: { id: '1', name: 'one' }, { id: '2', name: 'two' }, { id: '3', name: 'three' }, { id: '4', name: &apo ...

Validation for HTML5 does not appear when inputmask is used for entering mobile numbers

One problem that I have encountered is when using the input type = "text" with required = "required" for a mobile number along with an input mask. In this scenario, if a user does not enter any value, the HTML5 validation message does not appear. Instead, ...

What methods can I use to transfer data from one domain to another domain utilizing Ajax JSONP?

Example: The URL of my site is "http://localhost:54887/CustomOrdering.html", but I want to retrieve data from another site "http://localhost:27746/Orders.aspx". In order to do this, I have implemented the following code in my CustomOrdering.html: function ...

Encountering problem when trying to upload several images at once using a single input in CodeIgniter with

I'm attempting to use CodeIgniter and AJAX to upload multiple images using a single input field. Here's the code I have so far: HTML: <input type="file" name="files[]" id="file" multiple /> AJAX: $("#addItems").on("submit",function(e) { ...

Create a typescript class object

My journey with Typescript is just beginning as I delve into using it alongside Ionic. Coming from a background in Java, I'm finding the syntax and approach quite different and challenging. One area that's giving me trouble is creating new object ...

I want to initiate a Python script by clicking a button on my HTML page with the help of Ajax

Here is my JavaScript code: function executePython() { alert("executed"); $.ajax({ url: "http://localhost:5000/app.py", type: "POST", ...

When I apply position: absolute; to my navigation bar, the anchor tags and links do not seem to function properly, especially with a video playing in the background

How can I make my anchor tags/links work properly on a header with a video in the "background" and a menu on top? HTML <nav class="menu"> <a href="#" target="_blank">ABOUT</a> <a href="#" target="_blank">PRICES</a&g ...

Apparent malfunctions in Bower packages

Here are some of the packages available on bower: bootstrap-ui, angular-ui-bootstrap, and angular-ui-bootstrap-bower. It appears that only angular-ui-bootstrap-bower has built js files. Can anyone provide more information on this? ...

Initiate and cease automatic refresh with AJAX

Currently, I am in the process of developing a school e-learning forums module. The posts within this module are loaded in the following <div id="posts"></div> using a JavaScript function: var refreshcon = setInterval(function() { $('#po ...

What is the proper way for the curry function to function effectively?

Here's a function that I came across: function curry(fn) { var args = [].slice.call(arguments, 1); return function() { return fn.call(this, args.concat([].slice.call(arguments))); }; } I always thought this was the correct way fo ...

Troubleshooting why Vue.js isn't updating the DOM with two-way binding

I'm currently utilizing Vue.js for implementing two-way binding. One issue I am facing is with an edit button that should convert a text field into an input field upon clicking. However, the DOM does not update immediately as expected. For instance: ...

Javascript scoping issue with a function that generates and returns other functions

I am facing an issue with my function where I keep getting 2 in the alert message every time. It seems like a variable scope problem, but I haven't been able to resolve it yet. var someObj = {"a" : 1, "b" : 2}; function retrieveData(obj){ var func ...

Are there any libraries available that can assist with managing forms similar to how Google Contacts handles them

By default, Google Contacts has a feature where the form displays values with some of them being read only. However, when you click on a value, it converts the field into an editable form so you can easily make changes. After editing and pressing enter, th ...

"Why is the comparison function of bcryptjs returning null even though the hash being used is the one that was generated

For security purposes, I securely store hashed passwords in MongoDB. However, when I attempt to compare the stored password with a user-entered string, bcryptjs returns a null value. https://i.stack.imgur.com/4sTXM.png The hashed password is stored in bin ...

How to Monitor Clicks on a Flash Movie using jQuery

I've been working on a dynamic banner system that can support image banners and flash banners using object/embed. The site relies heavily on jQuery, especially for handling 'click' events. While tracking clicks on image banners is straightf ...

CKFinder Error: Unable to find definition for t.event.special.swipe

Upon using CKFinder 3.2.0 with Firefox 44.0, I encountered the following error message. Interestingly, this issue is exclusive to Firefox while Chrome works perfectly fine. Any insights on what could be causing this problem and how it can be resolved? Ty ...