The application of jQuery .css({'-moz-animation-delay':'300ms'}) is failing to take effect in Firefox

Here is the HTML code I am working with:

<div class="effect-wrapper">
    <div class="effect-content"></div>
    <div class="effect-content"></div>
    <div class="effect-content"></div>
    <div class="effect-content"></div>
</div>

I have included the following jQuery script:

$(".effect-wrapper .effect-content").each(function (j) {
    $(this).css({'-webkit-animation-delay':(j * 300) + 'ms'
    ,'-moz-animation-delay':(j * 300) + 'ms'
    , '-o-animation-delay':(j * 300) + 'ms'
    , 'animation-delay':(j * 300) + 'ms'});
});`

You can view the example on http://jsfiddle.net/F5wzr/1/.

However, when inspecting the class .effect-content in Firefox using Firebug, it seems to only contain the style 'animation-delay' and not '-moz-animation-delay'. Can anyone offer assistance or guidance on this issue? Thank you for your help.

Answer №1

The reason for this behavior in Firefox is that the browser utilizes the standard 'animation-delay' property, as documented on this Mozilla Developer Network page

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

Employing jQuery for adding a class to the initial TD in every table row

Currently, I am dealing with a table structured like this: <table width="100%" border="0" cellspacing="0" cellpadding="0" id="tablecontent"> <tr class="tablerow"> <td>This is the td I want to add a class to.</td> <td c ...

Dynamically add a Font Awesome icon to the background of an input text field with React and react-fa

Utilizing ReactJs and react-fa to access Font Awesome icons, I am attempting to dynamically place one of the icons inside a text input. The following is my code snippet: import React, { Component } from 'react'; import PropTypes from &a ...

Is there a way to create a clickable image on my wordpress.org website that links to the entire image?

Currently, only the title of my posts can be clicked to access each individual post. I would like the entire image to also link to the post. <article id="post-<?php the_ID(); ?>" <?php post_class('card-box col-lg-4 col-md-6 col-sm-12 col- ...

Apply rounded corners to the table row

Currently, I am utilizing a datagrid to display information. I have been attempting to implement border radius on all the table rows, but it doesn't seem to be working. Does anyone have insight into how I can apply border-radius to all rows in the t ...

The ajax success error function does not trigger in jQuery

Hey, check out my code below: <html> <head> <script src="http://code.jquery.com/jquery-1.8.0.min.js"> </script> </head> <body> <form id="foo"> <label for="bar">A bar</label> <input id ...

Issue with jQuery draggable appendTo functionality not functioning as expected

Below is the code snippet: JavaScript jQuery $('.dragBox').draggable({ axis: 'y', appendTo: 'parent', containment: [0,0,0,150], start: function() { $(this).addClass('grab ...

The error message "InfiniteAjaxScroll TypeError: $ is undefined" indicates a

Hello, I am currently experimenting with implementing Infinite Ajax Scroll in Silverstripe. I have followed the instructions outlined on the Getting Started Page and have included "jquery-ias.min.js" using an include statement in my Page.ss Template AFT ...

Issue with CSS elements unable to shift to the left

My attempt to align CSS elements to the right using margin-right: 200px is not working, while margin-left: 200px does. This issue arises even though my CSS file appears as follows: .wrapper { display: inline-block; position: abso ...

Creating a grid pattern of boxes within a rectangle using CSS

I'm attempting to design a rectangle filled with colorful boxes Here is the code I'm using: <div class="col-md-3" > <div id="myViewport" style="height: 700px; width: 50px; padding: 10px; border: 5px solid gray; margin: 0;"> ...

Using Django to populate one dropdown select option based on the selection made in another

In my own unique environment, I have attempted to implement the concept detailed above, albeit with scattered documentation. Unfortunately, I am facing challenges in getting it to function correctly. The current state of affairs is such that the web page o ...

Trouble Ensues as CSS Div Refuses to Center

I'm in the process of creating a practice website to improve my HTML and CSS skills, but I'm having trouble centering a specific div. I've attempted to use margin: 0 auto, but it doesn't seem to affect the positioning of the div at all. ...

Using the Rails framework, a basic "remote: true" request does not produce a JavaScript response

In my Rails app, I have set up an iframe to display static HTML files from the same domain. Inside the iframe, I added a link with the remote attribute in hopes of making an in-place AJAX call to create a new nested resource. Here is the code snippet: --- ...

Beautifully collapsing inline-blocks using only CSS

My header features three inline-blocks within a container that is text-aligned center. The left block floats to the left, and the right block floats to the right, creating a visually appealing effect where the middle block's text remains centered on s ...

Creating a sticky positioning effect in CSS

Can someone assist me in implementing the position: sticky as demonstrated below? Currently, the upcoming date overlaps the current date. This causes the opacity and shadow of the date to reach 100%, which can create a cluttered appearance if there are m ...

Creating a multi-tiered circular graph with HTML5 canvas: a step-by-step guide

I'm attempting to create a shape resembling a pie chart on a canvas using HTML and JavaScript, but I haven't come across a built-in function that can achieve this directly. Does anyone know of a straightforward method to generate a pie chart si ...

I'm having trouble with my carousel. I suspect it's the "link-rel" in the head tag that's causing the issue

Having trouble with my carousel - it's not navigating properly. When I check the console, it shows: Failed to find a valid digest in the 'integrity' attribute for resource '' with computed SHA-256 integrity 'YLGeXaa ...

Why isn't my li:hover responding the way it should?

Check out this Fiddle When the mouse hovers over the element, an opaque "cloud" appears and I want to completely hide the underline that is normally displayed. The underline is created by using a border-bottom on the parent div. .element_style{ width ...

What is the best way to eliminate excessive spacing between two containers in mobile view?

I have created a layout with a single container and a row split into two columns. The left column contains a title and the right column contains a card, both centered. I am facing an issue when viewing it on mobile, there is excessive spacing between the t ...

Designing a mobile user interface for time intervals

Currently, I am utilizing a datetimepicker for inputting a duration of time within a form. While the UI functions smoothly on a desktop, it struggles in a mobile setting. Despite my efforts, I have yet to discover a suitable alternative that seamlessly ope ...

Having trouble getting Material Design Lite to function properly on my site

I'm having trouble with my HTML template that incorporates Google Material Design Lite. The header is working fine, but anything I add below it just moves to the top. Can someone take a look at the code and offer some assistance? .demo-layout-trans ...