3

さて、div にフィルターを設定しました。これは、これらの css プロパティを使用して、デフォルトでその div の背景画像をグレースケールにしています。

onblur と onfocus の動作と、jQuery を使用して animate() と一緒に使用する方法を理解しています。

これはうまくいき、私には理にかなっています：

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

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

    // Animation complete.

    });
});

現在、特定の css3 プロパティをアニメーション化する構文に問題があります。

アニメーション化する代わりに、これら 2 つのプロパティをアニメーション化する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;  
}​

アラートすら届かない！:(

4

1 に答える 1

6

トランジションを使用する場合、これらのアニメーションはハードウェアアクセラレーションであるかのように、なぜjQuery animateを使用するのかわかりません。jQueryanimateは最後の手段として、または古いブラウザでサポートが必要な状況でのみ使用する必要があります。

ともかく：

http://jsfiddle.net/Ej8s3/

つまり、トランジションを追加し、新しいプロパティでクラスを作成し、JSを使用してオンとオフを切り替えます。私はjQueryを使用しましたが、これを使用せずにこれを行うのは簡単です。

于 2012-09-27T19:45:21.577 に答える