Issues with jQuery animate.css functionality specifically occurring on Firefox browser

Question

Issues with jQuery animate.css functionality specifically occurring on Firefox browser

As a beginner in jQuery, I have been exploring different animations and recently came across an issue with Firefox compatibility.

I discovered the animate.css library, and decided to incorporate its animations into text captions on a slider using the Soliloquy WordPress plugin.

The Soliloquy slider dynamically adds a class called

.soliloquy-active-slide

to the active slide. To apply the animation, I used jQuery to add the 'animated slideInLeft' class to the active slide:

jQuery('#caption-1').on('.soliloquy-id-8 .soliloquy-active-slide').addClass('animated slideInLeft');

Initially, the animation worked flawlessly when the first slide loaded. However, it stopped working upon returning to the first slide in Firefox, whereas it continued running smoothly in Chrome and Safari even after cycling through the slides again.

Interestingly, the animation functioned correctly in Firefox when the Firebug debugger was open.

While I haven't included much code here, I am willing to provide more if necessary. Any guidance on resolving this Firefox-specific issue would be greatly appreciated.

Thank you!

jquery html css animation wordpress

Answer 1

Answer №1

For multiple occurrences of the animation, it is important to remove the appropriate classes once the animation has finished:

    jQuery('#yourElement').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        jQuery(this).removeClass('animated slideInLeft');
    });

Afterward, you can reapply your preferred classes...

Answer 2

For multiple occurrences of the animation, it is important to remove the appropriate classes once the animation has finished:

    jQuery('#yourElement').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        jQuery(this).removeClass('animated slideInLeft');
    });

Afterward, you can reapply your preferred classes...

Answer 3

Answer №2

It appears that manipulating dynamically generated classes, such as the "active-slide" class created by the slider, is not straightforward.

To overcome this hurdle, I implemented a solution using an internal action hook which proved to be effective:

add_action( 'soliloquy_api_on_load', __NAMESPACE__ . '\\slide_in_left_onload' );
function slide_in_left_onload( $data ) {
  ob_start();
  ?>
  soliloquy_<?php echo $data['id']; ?>.find('.soliloquy-id-8 .soliloquy-caption #caption-1').addClass('animated slideInLeft').css('display','block');
  <?php
  echo ob_get_clean();
}

add_action( 'soliloquy_api_after_transition', __NAMESPACE__ . '\\slide_in_left' );
function slide_in_left( $data ) {
  ob_start();
  ?>
  soliloquy_<?php echo $data['id']; ?>.find('.soliloquy-id-8 .soliloquy-caption #caption-1').addClass('animated slideInLeft').css('display','block');
  <?php
  echo ob_get_clean();
}

add_action( 'soliloquy_api_before_transition', __NAMESPACE__ . '\\end_slide_animation' );
function end_slide_animation( $data ) {
  ob_start();
  ?>
  soliloquy_<?php echo $data['id']; ?>.find('.soliloquy-id-8 .soliloquy-caption #caption-1').removeClass('animated slideInLeft').css('display','none');
  <?php
  echo ob_get_clean();
}

Answer 4

It appears that manipulating dynamically generated classes, such as the "active-slide" class created by the slider, is not straightforward.

To overcome this hurdle, I implemented a solution using an internal action hook which proved to be effective:

add_action( 'soliloquy_api_on_load', __NAMESPACE__ . '\\slide_in_left_onload' );
function slide_in_left_onload( $data ) {
  ob_start();
  ?>
  soliloquy_<?php echo $data['id']; ?>.find('.soliloquy-id-8 .soliloquy-caption #caption-1').addClass('animated slideInLeft').css('display','block');
  <?php
  echo ob_get_clean();
}

add_action( 'soliloquy_api_after_transition', __NAMESPACE__ . '\\slide_in_left' );
function slide_in_left( $data ) {
  ob_start();
  ?>
  soliloquy_<?php echo $data['id']; ?>.find('.soliloquy-id-8 .soliloquy-caption #caption-1').addClass('animated slideInLeft').css('display','block');
  <?php
  echo ob_get_clean();
}

add_action( 'soliloquy_api_before_transition', __NAMESPACE__ . '\\end_slide_animation' );
function end_slide_animation( $data ) {
  ob_start();
  ?>
  soliloquy_<?php echo $data['id']; ?>.find('.soliloquy-id-8 .soliloquy-caption #caption-1').removeClass('animated slideInLeft').css('display','none');
  <?php
  echo ob_get_clean();
}

Issues with jQuery animate.css functionality specifically occurring on Firefox browser

Answer №1

Answer №2

Similar questions

Combining ajax and jsp to fetch data for a servlet

What could be causing my navigation bar to malfunction?

Adjust image loading according to screen dimensions

Is it possible to implement Photoshop-inspired color curves filters on an HTML tag?

Adding JavaScript to dynamically loaded AJAX content

Guide on utilizing the list of names in a POST request

Optimal Placement of jQuery Event Handlers in React/Redux Components with Asynchronous Data Loading

The image I want to show is invisible on the CSS custom radio button

Execute with jQuery using Multiple Attribute Selector

Position a div in the center both horizontally and vertically within a section, ensuring that each section expands to fill the entire page when scrolling

Utilize data attributes for streamlined markup efficiency

Is there a way to dynamically adjust the form action based on whether or not JavaScript is enabled?

Lengthen the space between each item on the list to enhance readability

Vue.JS and its Onclick event handler allows for dynamic and interactive

Binding data to a dropdown menu

Which method is more effective: embedding PHP processing code within HTML files, or having forms redirect to separate PHP scripts that ultimately point back to static pages?

How to change the image source using jQuery when hovering over a div and set its class to active?

Issue with the positioning of the datepicker is not functioning properly

Pagination functionality in TablePress allows for improved organization and

There is a mismatch in the host name: please consider using a domain name (e.g., https://myname.myorg.com) instead of https://localhost