jQuery animations not working in Firefox

Question

For some reason animation methods are not working in Firefox. Even basic functions 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.

Answer 1

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

Answer 2

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?

Answer 3

Have you provided duration?

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

Answer 4

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.