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

Attempting to preserve the CSS transform effect as I switch between menu options

Error message appears when attempting to display a variable in HTML without defining it

Adjusting scroll position delay for a fixed element when using an Android device

Is your dropdown menu malfunctioning with jQuery? (Chromium)

Analyze the HTML data received from the API

A comparison between XPath and JQuery locators when using Selenium

What is the method for determining the length of an array of targets?

What is the main purpose of using the CSS transform:translate() property?

Ways to remove content that exceeds the boundaries of a div element

Retrieving data from an API after the onClick event is activated

Passing variable as a value in a POST request to interact with PHP and MySQL

Generating hyperlink regions dynamically

Deactivate the second subradio button when the first option is selected and vice versa

Customizable initiation time for the JQuery Countdown timer

Is it possible to alter the appearance of my menu when clicked on?

Show unique field data characteristics encoded in multidimensional arrays in WordPress

Angular js encountered an unexpected error: [$injector:modulerr] ngRoute

Tips for hiding the frame of a React MUI Select component

Utilizing AJAX for sending a data string and image file to a PHP server

DOM is set for Jquery activation