Question

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

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

这很复杂，因为：

我需要在动画结束后删除style=""，否则style会覆盖.hover处理程序设置的CSS类。所以我使用了这个技巧：jQuery - remove style added with .css() function
我不知道在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执行动画，并在不支持的情况下回退到javascript（例如）Modernizr：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/

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

2 个答案: