3

好的，所以我在 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);to动画时遇到了 MAJOR 语法错误grayscale(0);

多谢你们！让我知道您是否还有其他需要。

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

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

它仍然无法正常工作...

连同一些CSS

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

我什至没有收到警报！:(

4

1 回答 1

6

我不确定您为什么要使用 jQuery animate 来执行此操作，就好像您使用过渡那么这些动画是硬件加速的 - jQuery animate 仅应作为最后的手段使用，或者在旧浏览器需要支持的情况下使用。

反正：

http://jsfiddle.net/Ej8s3/

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

于 2012-09-27T19:45:21.577 回答