使用jQuery获取css动画属性 [英] Get css animation property with jQuery

问题描述

我已经使用CSS定义了一个动画，它将首先将一个带有jQuery的类添加到已定义的元素中，如下例所示：

I've defined an animations with CSS which will start by adding a class with jQuery to a defined element like in the following Example:

jQuery（我是在Firefox中测试）：

jQuery (I'm testing in Firefox):

$(document).on('click', 'h1 > span:first-child', function(event) {
    $(this).addClass('animate');
    console.log($('h1 > span.animate').length);   // 1 (Element exists)
    console.log($('h1 > span.animate').css('animation')); // Empty string
    console.log($('h1 > span.animate').css('-moz-animation')); // Empty string
    console.log($('h1 > span.animate').css('-webkit-animation')); // undefined of course ;) 
});

CSS动画（工作正常）

CSS animation (working fine)

// The animation testen was defined before an is working an assign class to span element
body h1 span.animate {
  -webkit-animation: testen 5s 1;
  -moz-animation: testen 5s 1;
  -ms-animation: testen 5s 1;
  -o-animation: testen 5s 1;
  animation: testen 5s 1;
}

我总是得到一个空字符串而不是类似的东西的原因是什么这个？

What's might be the reason that I always get an empty String instead of something like this?

animation: testen 5s 1;

提前致谢

推荐答案

您需要直接访问值而不是捆绑包：

You need to access the values directly instead of the bundle:

$(document).on('click', 'h1 > span:first-child', function(event) {
    $(this).addClass('animate');
    console.log($('h1 > span.animate').length);   // 1 (Element exists)
    console.log($('h1 > span.animate').css('animation-duration')); // 5s
    console.log($('h1 > span.animate').css('-moz-animation-duration')); // 5s
    console.log($('h1 > span.animate').css('-webkit-animation-duration')); // 5s
});

DEMO

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