jQuery 动画到透明 - 更简单的解决方案？

Question

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

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

这很复杂，因为：

1. 我需要在动画结束后删除style=""，否则style 将继续覆盖.hover 处理程序设置的CSS 类。所以我用了这个技巧：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/

Answer 2

让 CSS 做动画，并在（例如）Modernizr 不支持时回退到 javascript：http://modernizr.com/

if (Modernizr.csstransitions) {
    // Animate background color
    $('.element').addClass('animate-background-color');
} else {
    // use javascript animation.
}

还有你的 CSS：

.element {
    -webkit-transition: background-color .5s ease-out 0.1s;
    -moz-transition: background-color 5s ease-out 0.1s;
    transition: background-color .5s ease-out 0.1s;
    background-color: rgba(121,123,123,1);
}

.element.animate-background-color {
    background-color: rgba(121,123,123,0);
}

css 动画的小提琴：http://jsfiddle.net/c5PHf/