Geek Answers Handbook

JQuery animations not working in Firefox

For some reason, animation methods do not work in Firefox. Even basic functions like show () do not work. In IE 8, they work fine. Does anyone else come across this or can explain why this is happening?

Edit: Code Example -

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

The css options for .form_error are not visible to anyone, so jQuery can show it.

I tried to wrap this in an IF statement and write the firebug log to the console if it works, i.e.

 $(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, like css (), find (), etc.

EDIT:

Here is the HTML for the table (with 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 is 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; }

Hope this helps someone understand what is happening!

UPDATE:

Now it seems that it works - sometimes! I cannot determine why it seems to work at some points, and not at others. I do not think that this is due to caching, because I disabled the cache using the developer toolbar and I am updating using ctl-f5.

+4
source share
4 answers

Normally jquery works in firefox, which says firebug, are there any script errors or just missing files?

0
source

If you are not getting JS errors in FF or Firebug, this is most likely a problem with your HTML / CSS.

UPDATE:

You have this in your css:

left: 300%;

Could this be the culprit?

0
source

Do you provide a duration?

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

In addition to removing all other CSS that might interfere in some way, also disable all browser add-ons. You can inadvertently block an animation with some kind of ad unit or the like. Grab a web developer extension / add if you don't have one; it can allow you to easily enable and disable CSS and track problems.

0
source

More articles:


All Articles