Анимационный текст по клику

Question

Анимационный текст по клику

0

    jQuery ( function ( $ ) {
        console.log(">>Testing animation");
        $('a.loveit').on('click',function(event){
            event.preventDefault();
            var text = $(this).find('div.love-text');
                text.html("<strong>Liked!</strong>");

        });

    });

**HTML**
<div>
    <a class="loveit" href="#">

    <div class="love-text">
    <i class="icn-heart"></i><strong>Like</strong>
</div>
    </div>
    <div class="pure-u-1-2">
        <span class="count">0</span>

   </div>
    </a>

CSS

 div.love-text {
      strong{
       -webkit-animation: fade-in 1s;
       -webkit-transition: fade-in 1s;
        -o-transition: fade-in 1s;
        -moz-transition: fade-in 1s;
      }
    }

    @-webkit-keyframes fade-in{
    from{
        // opacity:1;
        font-size: 14px;

    }
    to{
        // opacity:0;
        font-size: 23px;

    }
    }

Когда я нажимаю на "Мне нравится", он меняет на "Понравился!". без сердца. Проблема в том, что когда страница загружается, она уже запускает анимацию, которую она не должна делать. Поэтому, когда вы нажимаете "нравится" в первый раз, он должен начать анимацию при замене на "LIKED!". Кроме того, я не мог понять, как вернуться к оригиналу. Как с сердцем, если тот же самый пользователь снова нажмет.

Что касается анимации, я не уверен в том, что css3 - как иметь easeoutback, который бы отображал текст, напоминающий "рябь" (я не могу это объяснить). Я искал онлайн навсегда и не смог найти анимацию.

По достоинству оценят указатели или советы или помощь!

kittymeows 11 дек. 2013, в 03:58

Источник

0

Попробуйте использовать этот плагин: ricostacruz.com/jquery.transit Это действительно хорошо и использует переходы CSS3.
Hardy 11 дек. 2013, в 02:48

Теги:

jquery

css3

1 ответ

Ещё вопросы

Попробуйте использовать этот плагин: ricostacruz.com/jquery.transit Это действительно хорошо и использует переходы CSS3.

Hardy · Accepted Answer · 2013-12-11T00-20-00.000Z

Попробуйте использовать плагин JQuery Transit (http://ricostacruz.com/jquery.transit/). Тогда вы можете легко анимировать:

$('a.loveit').on('click',function(event){
    $('.love-text').transition({opacity: 0, scale: 0}, 200, 'easeOutBack', function() {

      // Animation completed
      // Change your element text..

      var text = $("#container").find('div.love-text');
      text.html("<strong>Liked!</strong>");

      $('.love-text').transition({opacity: 1, scale:1}, 500, 'easeOutBack');

    });
}

спасибо за плагин и у меня есть один вопрос. как я могу получить текст "Liked with heart", поменять местами, если нажать "Liked!" очередной раз?