Adding animation CSS class with Jquery for twitch status

Question

I am trying to add a css style on an element based on whether my twitch status is live or not. Sort of like a beacon. I cannot seem to get it to add the css style to the object. if I add the animation style property directly in the html it does work, but need it wrapped around an if statement based on the twitch status. Here is the script code which sits in my 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>

Here is the HTML line with the css class i am trying to alter.

<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>

I have also have the code in JSFIDDLE. https://jsfiddle.net/LYv3R/407/

Answer 1

Your selector should have the . to identify the class elements. Not providing the dot, will search for the fa and fa-twitch tag names instead.

$('fa fa-twitch')

should be

$('.fa.fa-twitch')

As the 2 classes are present on the same selector. The way you have written would try to find a child with class fa-twitch

Also make sure you code is inside dom ready.

Check Fiddle