Question

我在jQuery上几乎是一个新手，我试图使用一些除了在Firefox上工作正常的动画。

我正在使用animate.css库，并尝试在滑块上使用动画制作文字字幕。

我正在使用Soliloquy wordpress插件滑块。

soliloquy滑块添加了

.soliloquy-active-slide

到当前活动的幻灯片，所以我添加了jQuery来在活动幻灯片上添加动画类：

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

动画实际上在第一张幻灯片加载时有效，但是当滑块回到第一张幻灯片时停止工作。

奇怪的是，这只发生在Firefox上，在Chrome和Safari中，当动画返回到第一个滑块时，动画会继续运行。

Odder仍然，动画确实按预期的firebug调试器工作。

我意识到我还没有发布很多代码，但如果需要，我可以提供更多代码。

任何使用Firefox的帮助都会很棒。

干杯

Answer 1

如果您希望动画多次出现，则需要在动画结束后删除相应的类，如下所示：

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

以后您可以再次添加所需的课程......

Answer 2

似乎你不能在动态生成的类上添加/删除类，比如滑块生成的“active-slide”类。

所以我使用了一个内置的动作钩子，似乎可以解决这个问题：

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();
}

jQuery animate.css仅在Firefox上无法正常工作

2 个答案: