jQuery animations not working in Firefox

For some reason animation methods are not working in Firefox. Even basic fun开发者_开发百科ctions like show() do not work. They seem to work perfectly normal in IE 8. Has anyone else come across this or can explain why this is happening?

Edit: Example code -

$(document).ready(function() { 
  $(".form_error").show(); 
});

The css for .form_error sets display to none so that jQuery can then show it.

I have tried wrapping this in an IF statement and recording a console log in firebug if it works ie.

$(document).ready(function() { 
  if($(".form_error").show()) { 
    console.log('Complete') 
  } 
});

This results in a log message in Firebug. I have other jQuery methods working fine in Firefox eg css(), find() etc.

EDIT:

Here's the HTML for the table (with the error fields)

<table class="login">

        <thead>
        </thead>
        <tfoot>
            <tr><td><input type="submit" value="Sign In" /></td></tr>

            <tr><td class="auth_small_problems"><a href="forget">Forgotten details?</a></td></tr>
        </tfoot>

        <tbody>
            <tr><th scope="col"><label for="username">Username</label><br /><div class="form_error">This field is required.</div></th></tr>
            <tr><td><input type="text" id="username" name="username" value=""/></td></tr>
            <tr><th scope="col"><label for="password">Password</label><br /><div class="form_error">This field is required.</div></th></tr>

            <tr><td><input type="password" id="password" name="password" /></td></tr>
        </tbody>
        </table>

Here's the relevant CSS:

.form_error {
    -moz-box-shadow: 4px 4px 4px #3c3c3c;
    -webkit-box-shadow: 4px 4px 4px #3c3c3c;
    -opera-box-shadow: 4px 4px 4px #3c3c3c;
    box-shadow: 4px 4px 4px #3c3c3c;
    -moz-border-radius:12px 12px 12px 12px;
    -webkit-border-radius:12px 12px 12px 12px;
    -opera-border-radius:12px 12px 12px 12px;
    border-radius:12px 12px 12px 12px;
    background:none repeat scroll 0 0 #c21312;
    color:#f7f7f7;
    font-style:italic;
    font-weight:bold;
    left:300%;
    opacity: 0.8;
    padding:12px;
    position:relative;
    text-align:center;
    text-shadow:none;
    top:0px;
    width: auto;
    display: none;
}
th, td 
{
border-width:5px;
padding:10px 15px;
text-align:left;
text-shadow:1px 1px 1px #234C76;
}
#auth table.login {
margin:18px auto;
width:336px;
}

#auth table {
-moz-border-radius:10px 10px 10px 10px;
background:none repeat scroll 0 0 #69C212;
border:2px solid #234C76;
margin-top:18px;
width:960px;
}

table {
border-collapse:separate;
border-spacing:4px;
font-size:1.8em;
margin:0 auto;
padding:18px 5px 5px;
}

I hope this helps someone figure out what's going on!!

UPDATE:

It now seems to be working - occasionally! I can't pinpoint any reason why it seems to work at some times and not at others. I don't think it's anything to do with caching because I've Disabled Cache with the developer toolbar and I'm refreshing using ctl-f5.

Normally jquery works in firefox, what does firebug tell you are are there any script errors, or just missing files?

Have you provided duration?

$(".form_error").show('slow')

Aside from stripping all other CSS that might be interfering in some way, also turn off all browser add-ons. You may be inadvertently blocking animations with some sort of ad blocker or similar. Grab the web developer extension/add on if you don't have it; it can let you enable and disable CSS easily and trace issues.

If you're not getting any JS errors in FF or Firebug, then it's likely an issue with your HTML/CSS.

UPDATE:

You have this in your css:

left:300%;

Could that be the culprit?