IE11-通过jQuery.toggleClass()切换类不会激活IE11中的类-在所有其他浏览器中都可以使用 [英] IE11 - Toggling a Class via jQuery.toggleClass() Doesn't Activate the Class in IE11 - It Works in All Other Browsers

问题描述

这适用于除IE 11之外的所有浏览器.

This works in all browsers except IE 11.

我的代码很基本.

单击文本以切换无限"类，该类(应)永远循环弹跳效果.

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

IE11将类应用于H1标签，但它不会像在所有其他浏览器中一样无限地进行动画处理.

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

预期的行为是使其在加载时反弹一次(这有效)，单击文本将应用无限"类，这(应)使它永远反弹(在IE 11中不起作用).

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>

我在使用IE 11.0.9600.17239的Windows 7上

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>

发布第二个示例后，这使我相信这是与IE 11结合使用的某种类型的jQuery问题...

推荐答案

虽然不漂亮，但可以完成工作:

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>

在动画完成之前设置"animation-iteration-count"时，似乎IE不配合.这将删除并重新添加类以确保动画完成.

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.

这篇关于IE11-通过jQuery.toggleClass()切换类不会激活IE11中的类-在所有其他浏览器中都可以使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！