javascript - 如何在每次点击时快速更改元素的背景颜色

Question

我有一个元素，我想在单击时更改背景颜色(例如:更改为蓝色)并立即更改回白色(#FFF)。我不想在这里切换。

('form').on('click', 'div', function(e) {
     e.preventDefault();
     $(this).addClass("blue-bkground").animate({backgroundColor:'#FFF'}, 300).removeClass("blue-bkground"); 
}

上面的代码可以工作一次，即我可以看到一次效果，但在后续点击时不再工作。

Answer 1

动画完成后需要删除类，所以将其放在animate的完整函数中。

$('form').on('click', 'div', function (e) {            
            $(this).addClass("blue-bkground").animate({ backgroundColor: '#FFF' }, 300, function () { $(this).removeClass("blue-bkground"); });            
        });

.blue-bkground
{
	background-color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
    <div>Click here</div>
</form>