Question

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

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

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

接下来的两个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之外的所有信息框。并且动画闪烁的坏动作只能在firefox中运行（没有在safari中专门测试过）。

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

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

P.S。我在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

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

THX

附录

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

我正在使用的完整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]);
        }
    }
};

新版和改进版：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) : '';
        }
    }
};

请投票给斯特罗克的回答，因为他敲了敲头。：）

Answer 1

有几件事：

包括jQuery 之前 bootstrap
IE（任何版本）不支持initial css属性的visibility值。只需使用visible。
至少在Chrome中，你在game.js的第209行遇到问题，其中正则表达式不匹配任何内容且bg为空，因此您需要处理此案例并返回颜色或句柄案件正确。当属性值为rgba(0, 0, 0, 0)时，您需要处理rgba。

如何在主要浏览器中使jQuery动画工作？

1 个答案: