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

Question

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.

The html on load starts with visibility hidden.

<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.

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/

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

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.

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

ps I wrote this specifically simple in html for 2 reasons:

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.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.

The full css hook function I was using:

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

Answer 1

A couple of things:

1. include jQuery before bootstrap
2. IE (any version) does not support initial value for the visibility css property. Just use visible .
3. 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.