javascript - 如何使 jQuery 动画在主要浏览器上工作？

Question

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

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

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

接下来的 2 个来自悬停(进入和离开)的 jquery 用于鼠标相关行为。

输入:

$(".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>");

离开:

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

动画:

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

存在可疑行为的网页:

http://freethecube.com/kt/

如您所见，棋盘位的突出显示效果适用于所有主流浏览器。顶部的信息框适用于除 Internet Explorer 之外的所有浏览器。并且错误 Action 的动画闪烁仅适用于 firefox(尚未在 safari 中专门对此进行测试)。

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

那么我需要做些什么才能让这些看似很小的 css 问题在所有主流浏览器上都能正常工作？

附注 我在 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 文件:

jquery.js

jquery-animate.js

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

谢谢

---

附录

我遇到的上述问题并不像我最初认为的那样源于 CSS 操作。这确实是我使用的 CSS 钩子(Hook)。修复各种版本的 backgroundcolor 是一个较老的 hack。如:var bg = elem.currentStyle["backgroundColor"]; 和 var bg = document.defaultView.getComputedStyle(elem, null).getPropertyValue("background-color");。我的整个问题只是不同浏览器处理 RGB 和 RGBA 颜色格式的差异。我的功能在 RGBA 之前可以正常运行，但之后就不行了。

我使用的完整的 css 钩子(Hook)函数:

$.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]);
        }
    }
};

新的和改进的版本:可能仍然不完美，但已经更接近了。

$.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) : '';
        }
    }
};

请对 Strelok 的回答投赞成票，因为他一语中的。 :)

Answer 1

一些事情:

1. 在 Bootstrap 之前包含 jQuery
2. IE(任何版本)不支持 visibility css 属性的 initial 值。只需使用visible即可。
3. 至少在 Chrome 中，game.js 的第 209 行存在问题，其中正则表达式不匹配任何内容且 bg 为空，因此您需要处理这种情况并返回颜色或妥善处理案件。当属性值为 rgba(0, 0, 0, 0) 您需要处理 rgba 时会发生这种情况。