Weird jQuery behaviour in FF with FadeTo

Question

Greetings.

I'm having a weird problem with jQuery on my website.

I'm trying to emulate webkit transitions on buttons, so that everyone gets the shiny stuff. And as I predicted from google searching, it is being a royal pain.

So, the website (http://thechimeraproject.x10.mx) is where the issue can be seen. It's in the buttons, which should slowly glow. If you open on Chrome, the necessary browser specific stuff, although very poorly written, since I'm learning js as I go for... The third day now, is working, so the webkit effects start. Shiny.

You do the same with IE and it kinda does the same, with the exception of an apparent PNG transparency issue there, will get to it once FF is working.

You open up FF and you have an extra effect, and a kinda useless one. If you open it and keep your mouse out of the actual page, you'll see gray. If you put your mouse inside the page, the whole page fades into view. It's doing what the hover buttons divs should be. Since the script works by setting affected divs with the class "opacity", I've tried removing that class from my nav divs so that nothing in that page has "opacity" as a class, still screws up. Replaced (this) with ('.opacity') and still does the same.

Big question: Why? By the way, yes, everything is a big mess and poorly written. I took C programming, not javascript, so I'm going copy/paste on a lot of things and using basic programming logic (and luck) to push things along. I'd be thankful for tips on the coding, but if you start on that you'll be making a big list.

The actual code can be found on line 118 (the one that creates the fading).

Answer 1

Your html element has a class opacity applied to it which is causing the entire page to be faded out when the hover code is executed. I'm not sure why this is occurring, but your page has several unclosed tags and other errors which can always cause weird issues that aren't consistent across browsers.

Here's the validator's report on your HTML: http://validator.w3.org/check?uri=http%3A%2F%2Fthechimeraproject.x10.mx%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

I'd start with those errors and then use a tool like Firebug to determine where exactly the code is fouling up (if it still does).