单击时仅在Chrome上有效，而在Firefox或IE上不可用 [英] My javascript to removeClass + addClass when click only work on Chrome but not Firefox or IE

问题描述

由于某种原因，我在链接上单击时要删除/添加类的JavaScript只能在Google Chrome上使用.在Firefox上，它执行一次，然后不再重复.在IE上，它根本无法工作. (最新版本的Firefox和Chrome，IE 11)

For some reason, my piece of javascript to remove/add class when clicking on a link only works on Google Chrome. On Firefox, it executes once, then doesn't repeat. On IE, it just straight out doestn't work at all. (latest version of Firefox and Chrome, IE 11)

如果有人能指出我正确的方向，那将不胜感激！

If anyone could point me in the right direction, that'd be much appreciated!

简单的JSF问题在这里中间: http://jsfiddle.net/UDxtM/

Simple JSFiddle of the issue here: http://jsfiddle.net/UDxtM/

这是javascript:

This is the javascript:

$('[data-toggle="tab"]').click(function() {
    $('.tab-pane').removeClass('animated flipInY');
    $('.tab-pane').addClass('animated flipInY');
});

一些虚拟内容:

<ul class="main-nav">
    <li><a href="#front" data-toggle="tab">Front</a></li>
    <li><a href="#back" data-toggle="tab">Back</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="front">
        <img src="http://lorempixel.com/400/200/" />
    </div>

    <div class="tab-pane" id="back">
        <img src="http://placehold.it/400x200" />
    </div>
</div>

编辑#1: CSS过渡来自animate.css http://daneden.github.io/animate.css/.如果我只使用现代浏览器而不使用其中的一段javascript，它就可以完美地在现代网络浏览器上运行.我认为CSS不是问题.

Edit #1: The CSS transition is from animate.css http://daneden.github.io/animate.css/. It works flawlessly on modern web browsers if I just use them without the piece of javascript there. I don't think the CSS is the problem.

编辑#2: 显然，它适用于其他人的IE10和IE11，但不适用于我的.仍然留下了问题，Firefox仅播放一次代码.

Edit #2: Apparently it works on others' IE10 and IE11 but just not mine. That still leaves the problem with Firefox only play the code once.

推荐答案

您要删除这些类并在之后立即再次添加它们-因此，如果出于性能优化的原因，浏览器决定不在这两个操作之间进行重新绘制，将根本没有可见的效果.

You are removing the classes and adding them again immediately after – so if for performance optimization reasons the browser decides not to do a re-paint in between those two actions, there will be no visible effect at all.

通过使用较小的超时来解耦"再次添加类，这似乎也可以在FF中使用:

By using a small timeout to "de-couple" adding the classes again, it seems to work in FF as well:

$('[data-toggle="tab"]').click(function () {
    $('.tab-pane').removeClass('animated flipInY');
    setTimeout(function () {
        $('.tab-pane').addClass('animated flipInY');
    },
    10);
});

http://jsfiddle.net/UDxtM/3/

这篇关于单击时仅在Chrome上有效，而在Firefox或IE上不可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！