javascript - jQuery animate to transparent - 更简单的解决方案？

Question

我想将背景动画从彩色变为透明。我有这样的代码:

$('.selector')
.animate({
        'background-color' : 'transparent'
}, 2000, function () {
        $(this).css({ 'background-color' : '' });
});

这很复杂，因为:

1. 我需要在动画结束后删除 style=""，否则 style 会继续覆盖 设置的 CSS 类.hover 处理程序。所以我使用了这个技巧:jQuery - remove style added with .css() function

2. 我不知道有什么更简洁的方法可以在 jQuery 中等待效果完成，请参阅:How to wait for effect queue to complete in jQuery call sequence

那么，有没有更简单的解决方案呢？更巧妙地使用 jQuery 效果，不会那么复杂？

我也尝试了 trick with .animate(,1) :

$('.selector')
.animate({
        'background-color' : 'transparent'
}, 2000)
.animate({'background-color': ''}, 1);

但在这种情况下它不起作用。

Answer 1

CSS

.animated {-webkit-transition:background 0.4s ease;-moz-transition:background 0.5s ease;-ms-background 0.5s ease;background 0.5s ease;}
.selector {background:red}
.transparent_background {background: transparent};

html

<div class="selector animated"></diV>

js

$(".selector").addClass("transparent_background");

http://jsfiddle.net/UEyc6/