为抽动状态添加动画 CSS class 和 Jquery

Question

我正在尝试根据我的抽动状态是否有效在元素上添加 css 样式。有点像灯塔。我似乎无法将 css 样式添加到 object。如果我直接在 html 中添加动画样式属性它确实有效，但需要它根据抽动状态包裹在 if 语句周围。这是位于我的 header.

中的脚本代码

<script type='text/javascript'>
$(document).ready(function() {
// Check GRG's twitch status - uses css keyframes to pulse colors if live 
    $.getJSON('https://api.twitch.tv/kraken/streams/grimreapergamers', function(channel) {
        if (channel['stream'] === null) { 
            $('fa fa-twitch').css('animation','twitchpulse 4s infinite');
        } else {
            $('fa fa-twitch').css("style","animation:twitchpulse 4s infinite");
        }
    });
}}
</script>
</head>

这是 HTML 行，我正在尝试更改 css class。

<a class="dow-menu" href="http://www.twitch.tv/grimreapergamers" target="_blank" data-toggle="tooltip" data-original-title="Twitch">
    <i class="fa fa-twitch"></i>
</a>

我在 JSFIDDLE 中也有代码。 https://jsfiddle.net/LYv3R/407/

Answer 1

您的选择器应该有 . 来标识 class 元素。不提供点，将搜索 fa 和 fa-twitch 标签名称。

$('fa fa-twitch')

应该是

$('.fa.fa-twitch')

因为 2 个 class 出现在同一个选择器上。你写的方式会尝试找到 child 和 class fa-twitch

还要确保您的代码在 dom ready 内。

Check Fiddle

为抽动状态添加动画 CSS class 和 Jquery

Adding animation CSS class with Jquery for twitch status

html

css

jquery

twitch