1

各関数にはさらに多くのコードがありますが、これらは私の質問に関して重要な主な行です...これは、基本的にロールオーバー時に画像の彩度を下げるための人のライブラリからのものです。

マウスオーバー/ロールオーバーではなく、クリック時に変更するにはどうすればよいですか? これが彼のコードです...

jQuery(function($){
$cloned.closest(".DesaturateDiv").bind("mouseenter mouseleave",desevent);
}

  function desevent(event) 
  {
    if (event.type == 'mouseenter')
         $(".des.color", this).fadeOut(275);

    if (event.type == 'mouseleave')
        $(".des.color", this).fadeIn(200);
  }

if ステートメントを jquery トグルに変更し、一番上の行を .bind("mouseenter mouseleave", desevent) ... から .bind("toggle", desevent) に変更しようとしましたが、まだ機能しませんでした。私の質問は基本的に、mouseenter と mouseleave を onClick に置き換える方法で、画像が onClick で彩度を下げてから onClick で再び彩度を上げます。念のため、上記の 2 つの if の代わりに挿入したトグル コードを次に示します。

$('.DesaturateDiv').toggle(function() {

$(".des.color", this).fadeOut(275);

}, function() {
$(".des.color", this).fadeIn(200);
});

また、関連することですが、css3でこれを行うことはできますか? css3で画像の彩度を下げるコードは次のとおりです...

 img.desaturate{
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);
}

だから私の質問はそれをoncickする方法ですか？

img.desaturate:active{} を試しましたが、うまくいきませんでしたか?

編集：私はこれを試してみましたが、これらの行に沿った何かが必​​要だと思いますが、構文が正しくないと確信しています、助けて??

 function desevent(event) 
  {
    i = 0;

    if( i = 0 ){
    if (event.type == 'mousedown')
         $(".des.color", this).fadeOut(275);
         i = 1;
    }

    if( i = 1 ){
    if (event.type == 'mousedown')
        $(".des.color", this).fadeIn(200);
                     i = 0;
    }
  }
4

1 に答える 1

2

クリックした要素に特定のクラスを追加するだけです。

.desaturate{
    transition-duration: 400ms; //and other prefixes
}
.desaturate.active{
    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);
}
于 2012-09-04T12:04:05.833 に答える