第二次點擊jQuery反向動畫

Question

我想第二次點擊時有一個反向動畫，但第二個動畫必須與第一個動畫相反，但必須具有相同的動畫。 我也寫在jquery中，因爲我希望在單擊對象後保持該位置，直到再次單擊。

我希望你明白我的意思。萬分感謝！

的JavaScript：

$('.linguait').click(function() { 
    if (('.linguait').hasClass('active')) { 
     $('.linguait').removeClass('active'); 
     $('.linguait').addClass('deactive'); 
    } else{ 
     $('.linguait').removeClass('deactive'); 
     $('.linguait').addClass('active'); 
    } 
}); 

CSS：

linguait.active { 
    right:25%; 
    margin-right: -10px; 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
    -webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s; 
    transition: right 2s, margin-right 2s, transform 2s; 
} 

.linguait.deactive { 
    right:5%; 
    margin-right: -2px; 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
    -webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s; 
    transition: right 2s, margin-right 2s, transform 2s; 
} 

Answer 1

簡單地改變你的jQuery使用.toggleClass()至極做你的整個事情你 例如：

$('.linguait').click(function() { 
    $(this).toggleClass("active"); 
}); 

，並設置你標準（停用）在語言類，而不是它的流ñ。

linguait.active { 
    right:25%; 
    margin-right: -10px; 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
    -webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s; 
    transition: right 2s, margin-right 2s, transform 2s; 
} 

.linguait { 
    right:5%; 
    margin-right: -2px; 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
    -webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s; 
    transition: right 2s, margin-right 2s, transform 2s; 
} 

Answer 2

更新您的jQuery：

$(document).ready(function() { 
    $('.linguait').on('click', function() { 
    var $el = $(this); 
    if ($el.hasClass('active')) { 
     $el.removeClass('active'); 
     $el.addClass('deactive'); 
    } else if ($el.hasClass('deactive')) { 
     $el.removeClass('deactive'); 
    } else { 
     $el.addClass('active'); 
    } 
    }); 
}); 

使用CSS動畫：

@keyframes foo { 
    from { 
     transform: rotate(0deg); 
    } 
    to { 
     transform: rotate(360deg); 
    } 
} 

.linguait.active { 
    animation: foo 2s infinite linear; 
} 
.linguait.deactive { 
    animation: foo 2s infinite linear reverse; 
}