Как заставить эффекты jQuery работать на Firefox и Google Chrome?

Question

Я возлюсь с jQuery и эффектами fadeIn и fadeOut. У меня есть следующий код для отображения и скрытия div с сообщением.

`

<script type="text/javascript">
    $(document).ready(function() {

        $("button").click(function() {
            $("#upd").fadeIn(3000);
            $("#upd").fadeOut(20000);
        });

    });
</script>

<style type="text/css">
    div
    {
        background: rgb(237, 243, 254);
        margin: 0px 0px 5px 0px;
        padding: 13px 30px 13px 30px;
        width: 300px;
    }
</style>

`

Он отлично работает в Internet Explorer, но ничего не делает в Chrome, и я получаю показ и скрытие поведения в Firefox.

Есть ли специальный шаг для этой библиотеки, чтобы она работала равномерно или хотя бы близко во всех браузерах?

Answer 1

Попробуйте fadeOut от обратного вызова fadeIn . Это обеспечит запуск последнего эффекта после завершения первого, а не во время:

$(document).ready(function(){
  $("button").click(function(){
    $("#upd").fadeIn(3000,function(){
      $(this).fadeOut(2500);
    });
  });
});

jQuery должен работать почти одинаково во всех браузерах. Если у вас странное поведение, вы, вероятно, делаете что-то не так - не jQuery:)

Answer 2

Вот проблема: $ ( "Кнопка")

Нет элемента, подобного кнопке, если это класс, то: $ ('. button')

... а если это идентификатор, то: $ ( '# Кнопка')

Answer 3

Во-первых, убедитесь, что вы используете последнюю версию jQuery и что Javascript включен во всех ваших браузерах.

Во-вторых, попробуйте объединить вызовы fadeIn и fadeOut вместе:

$("button").click(function() {
    $("#upd")
        .fadeIn(3000)
        .fadeOut(20000);
});