使用jQuery动画-webkit-filter

Question

好吧,所以我在div上有一个过滤器,默认使用这些css属性制作div灰度的背景图像.

我理解我的onblur和onfocus工作以及如何使用它们与animate()使用jQuery.

比如这,对我有用并且有意义:

$('div.cell').hover(function() {
    $('div.cell').animate({

        border: 'none',
        height: '100px',
    }, 2000, function() {

    // Animation complete.

    });
});

现在我遇到了动画某些css3属性的语法问题.

而不是动画border: none,height: 100px但我如何动画这两个属性???

filter: none;
-webkit-filter: grayscale(0);

我现在拥有的是:

$('#clickme').click(function() {
  $('#book').animate({
    filter: 'none'
  }, 5000, function() {
    // Animation complete.
  });
});

但我越来越重大语法错误,而试图以动画-webkit-filter从grayscale(1);到grayscale(0);

多谢你们!如果您还有其他需要,请告诉我.

---

所以这就是我现在拥有的......

$(function() {
    $("div.cell").focus(function(){
        alert('WHOA');
        $("div.cell").attr('grayNow');
    });
});?

它还没有工作......

以及一些CSS

.grayNow {
    -webkit-filter: grayscale(0); 
    filter: none;  
}?

我甚至没有得到警报!:(

Answer 1

我不确定为什么你会使用jQuery动画来做这个,就好像你使用转换然后这些动画是硬件加速的 - jQuery动画应该只用作最后的手段,或者在旧浏览器中需要支持的情况下.

无论如何:

http://jsfiddle.net/Ej8s3/

简而言之,添加一个转换,使用新属性创建一个类,使用一些JS来打开和关闭它.我已经使用过jQuery,但没有它就可以做到这一点.