如何让jQuery动画在主流浏览器中运行？

I have a bit of code that works in all major browsers save internet explorer and a animation effect that works only in Firefox. I am not real sure on how to even begin fixing this problem as it is fairly basic code. I will post the code snippets, first the html in the original rendering and then the jquery code used to modify the html dynamically.

我有一些代码适用于所有主流浏览器，保存Internet Explorer和仅适用于Firefox的动画效果。我不确定如何开始解决这个问题，因为它是相当基本的代码。我将发布代码片段，首先是原始渲染中的html，然后是用于动态修改html的jquery代码。

The html on load starts with visibility hidden.

加载的html以隐藏的可见性开始。

<h3 class="infobox" name="infobox"><p>text</p><p>text</p></h3>

These next 2 pieces of jquery from hover (enter and leave) for mouse related behavior.

这些接下来的两个jquery来自悬停（进入和离开）鼠标相关的行为。

Enter:

输入：

$(".infobox").css("visibility", "initial");
$(".infobox").html("<p>Location: " + 
        "<span style=\"color: " + (possiblemove[x] ? "green" : "red") +     "\">" + indexcoords[x] + "</span></p>" + 
        "<p>Number of possible moves: " + possiblemoves + "&nbsp;&nbsp;&nbsp;Move count: " + nummoves + "</p>");

Leave:

离开：

$(".infobox").html("<p>text</p><p>text</p>");
$(".infobox").css("visibility", "hidden");

Animate:

动画：

for (var x = 0; x < 8; x++)
    if (x % 2 == 0)
        $(square).animate({backgroundColor: color}, 50);
    else
        $(square).animate({backgroundColor: 'red'}, 50);

$(square).animate({backgroundColor: color}, 50);

The web page with the questionable behavior:

具有可疑行为的网页：

http://freethecube.com/kt/

http://freethecube.com/kt/

As you can see the highlighting effect of the board bits works in all major browsers. The info box at the top works in all but internet explorer. And the animate flashing for bad moves only works in firefox (have not tested this specifically in safari).

正如您所看到的，主板位的突出显示效果适用于所有主流浏览器。顶部的信息框适用于除Internet Explorer之外的所有信息框。并且动画闪烁的坏动作只适用于firefox（没有在safari中专门测试过）。

The general thing in common between these elements are the css modifications explicitly. The full css and jquery being used can be easily viewed by viewing the source of the page and clicking on the css file at the top and the js file at the bottom.

这些元素之间的一般共同点是明确的css修改。通过查看页面源并单击顶部的css文件和底部的js文件，可以轻松查看正在使用的完整css和jquery。

So what do I need to do to get these seemingly small css issues to work across all major browsers?

那么我需要做些什么才能让这些看似很小的CSS问题能够在所有主流浏览器中运行？

p.s. I wrote this specifically simple in html for 2 reasons:

附：我在html中写这个特别简单有两个原因：

It is trust worthy code that anyone can see. It is actually a game and nothing else.
And easy portability into my wordpress site.

Jquery files being used:

正在使用的Jquery文件：

jquery.js

的jquery.js

jquery-animate.js

jQuery的animate.js

If there is a newer version of the animate, please let me know.

如果有更新版本的动画，请告诉我。

Thx

谢谢

---

Addendum

附录

The problems that I was having above did not stem from the CSS manipulation as I originally thought. It was indeed the CSS hook I was using. It was an older hack to fix the various versions of backgroundcolor there were. Such as: var bg = elem.currentStyle["backgroundColor"]; and var bg = document.defaultView.getComputedStyle(elem, null).getPropertyValue("background-color");. My whole issue was simply the difference in different browsers handly of RGB and RGBA color formats. My function would have been fine before RGBA, but not after.

我上面遇到的问题并非源于我最初想到的CSS操作。这确实是我使用的CSS钩子。修复各种版本的backgroundcolor是一个较老的黑客。如：var bg = elem.currentStyle [“backgroundColor”];和var bg = document.defaultView.getComputedStyle（elem，null）.getPropertyValue（“background-color”）;。我的整个问题只是不同浏览器中RGB和RGBA颜色格式的差异。我的功能在RGBA之前会很好，但不会在之后。

The full css hook function I was using:

我正在使用的完整的css钩子函数：

$.cssHooks.backgroundColor = 
{
    get: function(elem) 
    {
        if (elem.currentStyle)
            var bg = elem.currentStyle["backgroundColor"];        
        else if (window.getComputedStyle)
            var bg = document.defaultView.getComputedStyle(elem, null).getPropertyValue("background-color");

        if (bg.search("rgb") === -1)
            return bg;
        else 
        {
            bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

            function hex(x) 
            {
                return ("0" + parseInt(x).toString(16)).slice(-2);
            }
            return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
        }
    }
};

The new and improved version: May still not be perfect but it is a lot closer.

新的和改进的版本：可能仍然不完美，但它更接近。

$.cssHooks.backgroundColor = 
{
    get: function(elem) 
    {
        if (elem.currentStyle)
            var bg = elem.currentStyle["backgroundColor"];        
        else if (window.getComputedStyle)
            var bg = document.defaultView.getComputedStyle(elem, null).getPropertyValue("background-color");

        if (bg.search("rgb") === -1)
            return bg;
        else 
        {
            bg = bg.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);

            return (bg && bg.length === 4) ? "#" +
                ("0" + parseInt(bg[1],10).toString(16)).slice(-2) +
                ("0" + parseInt(bg[2],10).toString(16)).slice(-2) +
                ("0" + parseInt(bg[3],10).toString(16)).slice(-2) : '';
        }
    }
};

Please up vote Strelok's answer because he hit the nail on the head. :)

请投票给斯特罗克的答案，因为他的头上钉了一针。 :)

1 个解决方案

#1

A couple of things:

有几件事：

1. include jQuery before bootstrap
2. 在bootstrap之前包含jQuery
3. IE (any version) does not support initial value for the visibility css property. Just use visible.
4. IE（任何版本）不支持visibility css属性的初始值。只是使用可见。
5. At least in Chrome you have a problem in line 209 of game.js where the regex doesn't match anything and bg is null, so you need to handle this case and return the color or handle the case properly. It happens when the property value is rgba(0, 0, 0, 0) you need to handle rgba.
6. 至少在Chrome中你遇到了game.js第209行的问题，其中正则表达式与任何东西都不匹配且bg为null，所以你需要处理这种情况并返回颜色或正确处理案例。当属性值为rgba（0,0,0,0）时，需要处理rgba。