jQuery анимация не работает в Firefox - PullRequest
Новая
       1

jQuery анимация не работает в Firefox

4 голосов
/ 03 августа 2010

По какой-то причине методы анимации не работают в Firefox.Даже основные функции, такие как show (), не работают.Кажется, они работают совершенно нормально в IE 8. Кто-нибудь еще сталкивался с этим или может объяснить, почему это происходит?

Редактировать: Пример кода - 

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

Css для .form_error устанавливаетне отображать ничего, чтобы 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.

Ответы [ 4 ]

0 голосов
/ 03 августа 2010

Помимо удаления всех других CSS, которые могут каким-либо образом мешать, также отключите все надстройки браузера.Вы можете случайно заблокировать анимацию с помощью какого-либо блокировщика рекламы или чего-то подобного.Возьмите расширение для веб-разработчика / добавьте его, если у вас его нет;это позволяет легко включать и отключать CSS и отслеживать проблемы.

0 голосов
/ 03 августа 2010

Если вы не получаете никаких ошибок JS в FF или Firebug, то это, вероятно, проблема с вашим HTML / CSS.

UPDATE:

У вас есть это в вашем CSS:

левый: 300%;

Может ли это быть виновником?

0 голосов
/ 03 августа 2010

Вы предоставили продолжительность? 

$(".form_error").show('slow')
0 голосов
/ 03 августа 2010

Обычно jquery работает в Firefox, что Firebug говорит вам, есть ли ошибки скрипта или просто отсутствуют файлы?

...