使用jQuery获取css动画属性

我已经使用CSS定义了一个动画，它将通过向定义的元素添加一个带有jQuery的类来开始，如下例所示：

jQuery（我在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动画（工作正常）

 // 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; } 

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

 animation: testen 5s 1; 

提前致谢

Answer 1

您需要直接访问值而不是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