過濾器：灰度（0）使用jQuery動畫

我使用jQuery插件Waypoints在用戶滾動時爲一組圖像設置動畫。我想達到的效果是，當在所述圖像用戶滾動以下CSS被附加到對象 - opacity:1和filter:grayscale(0)，-webkit-filter:grayscale(0)和-moz-filter:grayscale(0)過濾器：灰度（0）使用jQuery動畫

的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%' });

任何幫助，將不勝感激。

伊恩

來源

2013-03-19 Ian Muscat

第一：'灰階（0）'沒有做任何事情。你需要'灰度（100％）'。另外：你使用什麼瀏覽器？根據https://developer.mozilla.org/en-US/docs/CSS/filter，目前只有webkit瀏覽器支持它 - 儘管我目前的Chrome並沒有顯示它。 – RoToRa 2013-03-19 12:43:09

當我在CSS中的'：hover'事件上設置'灰度（0）'時，它工作得很好 - 我正在使用Chrome的最新穩定版本。但是，無論如何，它甚至不會在HTML檢查器中顯示 - 「opacity：1」是。 – 2013-03-19 14:54:17

看起來這簡直是jQuery的.animate不支持所有的CSS屬性的情況下。任何可能感興趣的人都可以參考a list of supported properties。

來源

2013-03-19 15:10:26

如果您使用過濾器等新功能，爲什麼不利用使用CSS過渡對它們進行動畫處理。過濾器是可轉換的。看到http://codepen.io/imakewebthings/pen/ynGaB – imakewebthings 2013-03-23 00:44:41

這正是我最終做的......但我需要的過渡只發生在用戶滾動到通過javascript實現的特定的div。 – 2013-03-23 14:46:44

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); /* Activate grayscale */ 

grayscale('Content',100,false); /* Give color back */

來源

2016-08-23 20:19:09 kahsky

過濾器：灰度（0）使用jQuery動畫

回答

相關問題