javascript - 通过 jquery/javascript 动画添加一个类

Question

我有:

<div class="button" id="button1">Click</div>
<div class="button" id="button2">Click</div>

和 JS

$('.button').click(function(){
    $('.button').removeClass('selected');
    $(this).addClass('selected');
});

CSS

.selected {

background-color: green;

}

我可以“动画化”类“selected”的应用吗？例如，单击 div 时，背景从右侧滑入或淡入？有没有合适的插件可以实现这一点？是否有 CSS 解决方法/方法？

Answer 1

简单使用CSS3

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

例子 http://jsfiddle.net/tw16/JfK6N/

如果你不想使用 CSS3 来支持旧浏览器，请使用 animate 的 done() 回调

$('.button').click(function() {
  $('.button').removeClass('selected');
$(this).animate({
  backgroundColor: green
}, 1000, "linear", function() {
  $(this).addClass('selected');
});
});