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);

时，我遇到了MAJOR语法错误

谢谢你们！如果您还有其他需要，请告诉我。

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

$(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，但没有它就可以做到这一点。

使用jQuery动画-webkit-filter

1 个答案: