jQuery的动画透明

我想从彩色到透明的动画背景。 我有这样的代码：

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

这很复杂，因为：

我需要在动画结束后删除style="" ，否则style会覆盖由.hover处理程序设置的CSS类。 所以我使用了这个技巧：jQuery - 使用.css（）函数添加删除样式

我不知道有什么更好的方法来等待jQuery中的效果完成，请参阅：如何等待效果队列在jQuery调用序列中完成

那么，有没有更简单的解决方案？ 一些更聪明的使用jQuery效果不会那么复杂？

我也尝试过.animate(,1) ：

$('.selector')
.animate({
        'background-color' : 'transparent'
}, 2000)
.animate({'background-color': ''}, 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/

---

让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/

链接地址: http://www.djcxy.com/p/94891.html

上一篇: jQuery animate to transparent

下一篇: Jquery fade icon back on mouseout to the value it had before mousenter