2

jQueryプラグインのWaypointsを使用して、ユーザーが画像をスクロールしたときに一連の画像をアニメーション化します。私が達成したい効果は、ユーザーが上記の画像をスクロールすると、次のcssがオブジェクトに追加されることです-opacity:1とfilter:grayscale(0)、-webkit-filter:grayscale(0)-moz-filter:grayscale(0)

それopacity:1自体で正常に動作し、不透明効果が正常に達成されます。しかし、私は得ることができずfilter:grayscale(0)、働くことができないようです。これが私が使っているものです。些細な解決策だと思いますが、探しているものが見つからないようです。-webkit-filter:grayscale(0)-moz-filter:grayscale(0)

/* Waypoints
-------------------------------------------------- */
/* set-defaults
------------------------- */
    $.fn.waypoint.defaults = {
    context: window,
    continuous: true,
    enabled: true,
    horizontal: false,
    offset: 0,
    triggerOnce: true
    }

/* #about-section-two
------------------------- */
    $('#about-section-two').waypoint(function() {
    $('.avatar' ).delay(0).animate({opacity: 1, filter: "grayscale(0)", -webkit-filter: "grayscale(0)", -moz-filter: "grayscale(0)"});
}, { offset: '50%' });

どんな助けでもいただければ幸いです。

イアン

4

2 に答える 2

0

.animatejQueryがすべての CSS プロパティをサポートしていないだけのようです。興味のある方は、サポートされているプロパティのリストを参照してください。

于 2013-03-19T15:10:26.120 に答える
0

jQuery にはフィルター グレースケールのアニメーションはまだありません。それが来るまで待つか、このスクリプトを使用できます（javascriptのみ、JQueryなし）：

function grayscale(div,millisec,bool){
    if (bool){ /* We want to become grayscale */
        var i = 0;
        timertogray = setInterval(function addgray(){   
            if (i < 101){
                document.getElementById(div).style.filter = "grayscale(" + i + "%)"; 
                i = i + 10;
            }else{
                 clearinterval(timertogray); /* once the grayscale is 100%, we stop timer */
            }
        }, millisec);
    }else{ /* We want to give color back */
        var i = 100;
        timerfromgray = setInterval(function addgray(){ 
            if (i > 0){
                document.getElementById(div).style.filter = "grayscale(" + i + "%)"; 
                i = i - 10;
            }else{
                clearinterval(timerfromgray); /* once the grayscale is 0%, we stop timer */
            }
        }, millisec);
    }
}

そしてそれを呼び出す：

grayscale('Content',100,true); /* グレースケールを有効にする */

grayscale('Content',100,false); /* 色を戻す */
于 2016-08-23T20:19:09.413 に答える