Блог

Главная - Вопросы по программированию - jQuery addClass влияет один раз

jQuery addClass влияет один раз

#jquery #animate.css

#jquery #animate.css

Вопрос:

Я хочу анимировать свой тег div при нажатии кнопки, добавив класс animate.css с помощью jquery, но это работает только один раз и перестает работать при каждом последующем нажатии кнопки.

Это html-код:

     <div id="note" class="">a</div>
    <button id="submit">submit</button>

и это jquery

 $(document).ready(function() {
$('#submit').click(function() {
    $('#note').removeClass();
    $('#note').addClass('animated fadeInLeft');
    $('#note').html('some text');
});});

вы можете увидеть на http://jsfiddle.net/Lgg9D/5 /

как анимировать div при каждом нажатии кнопки?
Спасибо

Ответ №1:

Вы можете попробовать это:

 $('#submit').click(function() {        
    $('#note').removeClass();
    setTimeout(function(){
      $('#note').addClass('animated fadeInLeft');
      $('#note').html('some text');
    },1);        
});

ДЕМОНСТРАЦИЯ.

Ответ №2:

это займет немного времени, прежде чем классы будут удалены. вы можете добавить небольшую задержку после удаления классов:

 $(document).ready(function() {
    $('#submit').click(function() {
        $('#note').removeClass('animated fadeInLeft');
        setTimeout(function(){
            $('#note').addClass('animated fadeInLeft');},50);

        $('#note').html('some text');
    });
});

http://jsfiddle.net/Lgg9D/13/

Комментарии:

1. это очень похоже на мой ответ, который был добавлен 4 минуты назад.

2. вы знаете, я работал над скрипкой, я не видел вашего ответа. Если бы я видел это специально с -1, я бы не добавил свой ответ

3. ответ был правильным, единственная проблема в том, что трудно объяснить, почему это работает здесь, я сомневаюсь, что это связано с тем, как работает JS, например, во время вызова addClass текущий класс фактически еще не был удален, поэтому задержка 1ms заставит его работать.

Ответ №3:

Почему бы просто не переключить класс, он обрабатывает добавление и удаление в одиночку

 $(document).ready(function() {
    $('#submit').click(function() {
        $('#note').toggleClass('animated fadeInLeft');
        if($("#note").html() == 'a')
        {
        $('#note').html('some text');
        }
        else
        {
        $('#note').html('a');
        }
    });
});

Демонстрационная скрипка