The CSS animation in Firefox is limited to running only once

I am in the process of creating a tab system for beginners as an open-source project. Recently, I have come across what seems to be a bug in how Firefox handles CSS animations.

Issue with Tab Animations in Firefox

For the animation of each tab, I am utilizing Dan Eden's animate.css library. While everything works smoothly on Chrome and Safari, Firefox seems to only play the animation once and then fails to trigger it again.

To see this behavior firsthand, you can check out the demo on jsfiddle: http://jsfiddle.net/jsheffers/vqdJK/

$('#tabs li a').click(function(e){

    $('#tabs li, #content .current').removeClass('current');
    $(this).parent().addClass('current');
    var currentTab = $(this).attr('href');
    $(currentTab).addClass('current fadeInLeft');
    e.preventDefault();

});

Answer №1

Don't forget to remove the fadeInLeft class (check it out here).

$('#tabs li, #content .current').removeClass('current').remove('fadeInLeft');

This solution works perfectly in Firefox!

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

Changing the Style Sheets on the Fly

I have designed a grid of 5x5 boxes. My goal is to be able to click on a link and have that specific link change color after it has been clicked (a:visited) - one at a time. Unfortunately, my current code changes the color of all the links instead of just ...

Aligning two lines next to a radio button using HTML and CSS

I'm facing a challenge where I want to align two lines in the middle of a radio button. Despite my efforts, I am able to line up the top line but struggling with the bottom one. I prefer not floating the radio button as it's being styled using a ...

Guide to adjusting the camera rotation in Three.js

I successfully created a 3D cone using CSS3Renderer and TrackballControl. You can see it in action here: Now, I am looking to enhance the user experience by allowing them to input values to control the camera rotation instead of relying on TrackballContro ...

Verify the placement within the text box

Are there methods available in JavaScript or any JavaScript framework to determine the position within a textbox? For example, being able to identify that figure 1 is at position 2 and figure 3 is at position 3. Figure 1 Figure 2 ...

No response received from Java/Wicket server when making a jQuery AJAX call in IE versions 6, 7, and 8

Note: This is connected to a previously asked question. I'm facing an issue with my Wicket page where I have a form with complex client-side interactions using jQuery instead of Wicket. My goal is to build a JSON object, send it through AJAX, and per ...

Utilizing jQuery to enable and disable ASP.NET validation controls effortlessly

Can someone please provide me with instructions on how to use jQuery to enable or disable asp.net validation controls from the client side? This is necessary so that validations can be triggered on button press. Thank you. ...

What is the method for choosing multiple IDs using CSS?

Is there a way to target multiple IDs in CSS? For instance: #test_id_*{ } <div id="test_id_10"></div> <div id="test_id_11"></div> ...

Utilizing jQuery to transfer a row between two tables and reversing the action

This question has been asked a few times before, but I still haven't found a clear answer that applies to my situation. So here is my version of the issue: I have two tables - one is a DataTable with a list of properties (such as homes), and the othe ...

Adjust the jQuery slider values and then transmit them using AJAX

I´m currently utilizing the jQuery slider plugin and have a specific goal in mind: 1. My aim is to establish different maximum values for the slider based on which li data-value element the user has selected. For instance, if the user clicks on the < ...

Ways to retrieve the marginLeft of an element set with absolute positioning?

Currently, I am attempting to display an information box when hovering over an element with the mouse. The issue I am facing is that the element moves, and I need to determine its left margin. However, the element does not have a margin-left property in ...

What steps should be followed in order to write this piece of JavaScript

Upon viewing this post, you will notice an "add comment" link below it. Clicking on this link will add a textarea for users to input their comments. I am curious about how I can implement a similar function? Update: Thank you all for your assistance. I ...

Modify Full Calendar div with jQuery after a delay of 5 seconds

I'm currently working with jQuery and have a setup with 3 calendars (using jQuery fullCalendar). My goal is to cycle through these calendars one by one every 5 seconds. I've tried various techniques within the setInterval function but haven' ...

Exploring the Power of Ajax in Struts2

Recently, I started learning about Struts and Ajax. I attempted to create a webpage similar to Gmail, where users enter their username first and then proceed to enter their password. Despite trying out various plugins like Dojo, jQuery, and Jason jars, I ...

Tips for aligning carousel indicators vertically in Bootstrap 5

I am struggling to vertically align the carousel indicators in Bootstrap 5. The solutions I have found so far are for Bootstrap 4, but they do not seem to work for me. Here is the markup for my carousel indicators. <div class='carousel-in ...

Passing form data using AJAX before refreshing the page

Whenever I use a jQuery.get() request to send form data, the page reloads/redirects too quickly for my JavaScript/jQuery code to catch up and properly send the data where it needs to go. To work around this issue, I've been using an alert() to pause t ...

The disappearance of data stored in .data() in JQuery

I've encountered an issue with a function that creates an anchor, stores data, and appends it to a div element. var x = $("<a class='randomclass'></a>"); x.data('foo', 'bar'); console.log(x.data()); ... $("&l ...

Creating a dynamic full-width background image that adjusts its height according to the content: a step-by-step guide

Currently, I'm attempting to apply a background image to a webpage that spans 100% width in order to adjust to the viewport size. The method I am using involves placing an image directly after the body tag with the subsequent styling: img#background ...

How can you determine if a specific ID is present on a page using jQuery?

Can anyone assist me with this issue? I need help executing #home.hide() if the page contains id = "item1". My frustration level is high. Here's my code: <tr> <td id="item1"> </tr> if($("body:has(#item1)")) { $('#home').h ...

Utilizing jquery.validate.min.js for efficient form validation

Here is my JavaScript validate function: $("form[id='form']").validate({ Name: "required", submitHandler: function() { formSubmit(); } }); Not only do I wa ...

Uploading an HTML file website on Heroku deployment platform

I recently created a small website using HTML, CSS, Bootstrap, and JavaScript files. The main page is named index.html. However, I encountered an issue when trying to deploy it to my Heroku app (with the Node.js buildpack) as it kept showing an error messa ...