6

画像をグレースケールに変更するためのCSSがいくつかあります（Firefoxの場合はいくつかのsvgがあります）

img.grayscale{
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%); 
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%); 
            -o-filter: grayscale(100%);
            filter: url(desaturate.svg#greyscale);
            filter: gray;
            -webkit-filter: grayscale(1);
        }

しかし、グレースケールの値を0に変更するために、ホバー時にアニメーションが必要です。

私はこのコードを持っていますが、それは何もしません（もちろんクロームでは）、なぜそれがまったくアニメーション化されないのか分かりません。

<script type="text/javascript">
        $(".grayscale").hover(
            function () {
                $(this).animate({
                    '-webkit-filter': 'grayscale('0'%)'
                }, 300);
            }
        );
    </script>

％を100％から0％までアニメートすることは可能だと思いますね。

編集：私はすべてのブラウザで実行しようとしています。Chromeだけでなく、Chromeでテストを実行しているため、すべてのプロパティを変更しているわけではありません。クロームの答えが見つかったら、他のブロワーにも同じことができると思います:)

4

5 に答える 5

11

なぜ animate() を使用するのですか? すでに webkit 用にアニメーション化しているだけなので、transition プロパティとクラスを使用してアニメーションをトリガーしてみませんか? このような：

img {
  -webkit-transition: all 300ms;
}

img.grayscale {
  -webkit-filter: grayscale(1);
}

そして、呼び出してクラスを削除するだけです

$('img.grayscale').removeClass('grayscale');

注:グレースケールだけをアニメーション化するための特定のプロパティが何であるかはわかりませんが、要素で他のトランジションを行っていない場合は、「すべて」のトランジションで問題なく動作します。

于 2012-09-10T14:01:42.453 に答える
1

あなたは私のばかげた機能を使うかもしれません。しかし、それは機能します:)

HTML;

<img src ="http://upload.wikimedia.org/wikipedia/en/6/62/American_McGee_Alice_box.gif" border="0" class="ongray" />

CSS;

img {-webkit-transition:-webkit-filter 0.3s ease-in-out;}
.g {-webkit-filter: grayscale(1);}

JS;

$(".ongray").hover(
    function(){$(this).addClass("g")},
    function(){$(this).removeClass("g");}
);

http://jsfiddle.net/kEC92/3/

于 2013-03-05T08:42:58.160 に答える
0

onmouseoverとonmouseoutを使用してインライン CSS を設定することもできます

<img src="image.jpg" onmouseover="$(this).css('-webkit-filter','grayscale(100%)')" onmouseout="$(this).css('-webkit-filter','grayscale(0%)')" style="-webkit-transition:1000ms;">
于 2012-09-10T14:15:17.670 に答える
0

このように編集

<script type="text/javascript">
    $(".grayscale").hover(
        function () {
            $(this).animate($(this).css("-webkit-filter" , "grayscale('0'%)"), 300);
        }
    );
</script>
于 2012-09-10T13:53:29.513 に答える