css - 使用 jQuery 动画化 -webkit-filter

Question

好的，所以我在 div 上有一个过滤器，默认情况下使用这些 css 属性使该 div 的背景图像成为灰度。

我了解我的 onblur 和 onfocus 的工作原理以及如何使用 jQuery 将它们与 animate() 一起使用。

比如这个，它对我有用并且有意义:

$('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 animate 来执行此操作，就像您使用转换一样，这些动画是硬件加速的——jQuery animate 只能作为最后的手段使用，或者在需要支持的情况下使用旧的浏览器。

无论如何:

http://jsfiddle.net/Ej8s3/

简而言之，添加一个转换，创建一个具有新属性的类，使用一些 JS 打开和关闭它。我使用过 jQuery，但如果不使用 jQuery，这样做是微不足道的。