IE11 - Toggling a Class via jQuery.toggleClass() Doesn't Activate the Class in IE11 - It Works in All Other Browsers

Question

This works in all browsers except IE 11.

My code is pretty basic.

Click on the text to toggle the class "infinite" which (should) loop the bounce effect forever.

IE11 applies the class to the H1 tag but it doesn't animate infinitely like it does in all other browsers.

The intended behavior is for it to bounce once at load (this works) and clicking the text applies the class "infinite" which (should) makes it bounce forever (this doesn't work in IE 11).

	$(window).ready(function(){
		$('h1').on('click',function(){
			$('h1').toggleClass('infinite');
		});
	});

<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="bounce animated">Example</h1>

I am on Windows 7 with IE 11.0.9600.17239

Here is another example with all classes applied at start which works:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet"/>

<h1 class="animated bounce infinite">Example</h1>

After posting the second example, this makes me believe this is a jQuery issue of some type combined with IE 11...

Answer 1

It's not pretty, but it gets the job done:

$(window).ready(function(){
    var el = $('h1');

    el.on('click',function(){
        el.removeClass('bounce animated');
        setTimeout(function() {
            el.toggleClass('bounce animated infinite');
        });
    });
});

<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="bounce animated">Example</h1>

It seems like IE does not cooperate when setting the "animation-iteration-count" after an animation has previously finished. This will remove and re-add the classes to ensure the animation completes.