使用jQuery和'的.css“CSS动画 [英] CSS Animation using Jquery and '.css'

问题描述

所以我有一张code的。其目的是发挥从 Animate.css 选定的动画上点击。

的code

  $（集装箱方式＆gt;父）。点击（函数（）{
    $（'元'）。CSS（{
      '动画'：'fadeInUp .2s'，
      -webkit-动画'：'fadeInUp .2s
    }）;
  }）;
 

问题

动画运行，但仅一次。 '无限'属性造成的混乱：P

还有我能做什么，发挥该动画每一次有人点击了？

感谢您的时间。

我的HTML

 ＆LT;跨度类=父＆GT;
                ＆LT; IMG SRC =资产/ myimage.png阶级=过滤图像＆GT;
                ＆LT;跨度类=元素＆gt;文字＆LT; / SPAN＆GT;
            ＆LT; / SPAN＆GT;
 

我想动画文字每次我点击它。

解决方案

  $（集装箱方式＆gt;父）。点击（函数（）{
    $（'元'）。CSS（{
        '动画'：'fadeInUp .2s'，
        -webkit-动画'：'fadeInUp .2s
    }）;    的setTimeout（函数（）{
        $（'元素'）removeAttr（风格）。
    }，300）;
}）;
 

So I have a piece of code. The purpose is to play a selected animation from Animate.css on click.

The code

  $(".container>parent").click(function () {
    $('.element').css({
      'animation': 'fadeInUp .2s',
      '-webkit-animation': 'fadeInUp .2s'
    });
  });

The problem

Animation runs, but only one time. 'Infinite' attribute causes chaos :P

What else could I do, to play that animation every single time someone click it?

Thanks for your time.

My HTML:

            <span class="parent">
                <img src="assets/myimage.png" class="filter-image">
                <span class="element">Text</span>
            </span>  

I want to animate the text everytime I click it.

解决方案

$(".container>parent").click(function() {
    $('.element').css({
        'animation': 'fadeInUp .2s',
        '-webkit-animation': 'fadeInUp .2s'
    });

    setTimeout(function(){
        $('.element').removeAttr('style');
    },300);
});

这篇关于使用jQuery和'的.css“CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！