Question

由于某些原因，动画方法在Firefox中不起作用。即使像show（）这样的基本功能也不起作用。它们似乎在IE 8中完全正常。有没有其他人遇到这个或者可以解释为什么会这样？

编辑：示例代码 -

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

.form_error的css将display设置为none，以便jQuery可以显示它。

我已尝试将其包装在IF语句中，并在firebug中记录控制台日志，如果它可以工作即可。

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

这会在Firebug中生成一条日志消息。我有其他jQuery方法在Firefox中正常工作，例如css（），find（）等。

编辑：

这是表格的HTML（带有错误字段）

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

这是相关的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;
}

我希望这有助于有人弄清楚发生了什么!!

更新：

现在似乎有效 - 偶尔！我无法确定为什么它似乎在某些时候而不是在其他时间工作的任何原因。我不认为这与缓存有任何关系，因为我已经使用开发人员工具栏禁用了缓存，而且我使用ctl-f5进行了刷新。

Answer 1

通常jquery在firefox中运行，firebug告诉你的是有没有脚本错误，或只是丢失文件？

Answer 2

如果你没有在FF或Firebug中收到任何JS错误，那么你的HTML / CSS可能会出现问题。

更新：

你的css中有这个：

左：300％;

这可能是罪魁祸首吗？

Answer 3

你提供了持续时间吗？

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

Answer 4

除了剥离可能以某种方式干扰的所有其他CSS之外，还要关闭所有浏览器加载项。您可能无意中使用某种广告拦截器或类似功能阻止了动画。如果您没有，请抓取Web开发人员扩展/添加;它可以让您轻松启用和禁用CSS并跟踪问题。

jQuery动画无法在Firefox中运行

4 个答案: