jquery - 像按钮变化有过渡效果

Question

我正在创建喜欢或竖起大拇指按钮，我想添加一些过渡效果，有点像短淡入淡出图标变化的效果，在点击图标将消失或淡出，然后新图标将淡入，整个动画将在 0.6s-0.8s 顶部。图标是超棒的字体图标。

这是我到目前为止得到的 https://jsfiddle.net/2Lzo9vfc/11/

HTML

<h3>This is post 1</h3>
<div class="like">0 <button class="like-button"><i class="fa fa-thumbs-o-up"></i></button></div>

<h3>This is post 2</h3>
<div class="like">0 <button class="like-button"><i class="fa fa-thumbs-o-up"></i></button></div>

CSS

h3 {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    margin-right: 15px;
}

button {
    background: none;
    border: 1px solid black;
    color: black;
    text-transform: uppercase;
    font-size: 12px;
    padding: 5px 10px;
}

.like button {
    border: none;
}

JS

$('.like-button').each(function() {
  $(this).click(function() {
    $(this).children('i').removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up');
  });
})

Answer 1

你可以使用promise().done()让类在淡出完成后改变，然后在类改变后立即淡入。

$('.like-button').each(function () {
    $(this).click(function () {
        $this = $(this).children('i');
        $this.fadeTo(600, 0).promise().done(function () {
            $this.removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up').fadeTo(600,1);
        });
    });
})