为什么不滚动改变-webkit-filter：blur（）？

Question

这是一个小提琴：

http://jsfiddle.net/brockwhittaker/9Lk4v54h/

这是我的JS：

$(window).scroll ->
 scrollValue = ($(window).scrollTop())
 $(".img").css "webkitFilter : blur", scrollValue 

和CSS：

#height {
 height: 200vh;
}
#img {
 -webkit-filter: blur(5px);
}  

基本上，当我向下滚动时，我试图让模糊半径发生变化，但它似乎不起作用。

<div id="height">
<img id="img" src='https://farm8.staticflickr.com/7474/16082786652_6372b547bd_n.jpg' />
</div>

有人知道它为什么不起作用吗？

感谢您的帮助！

Answer 1

看起来您可能正在使用CoffeeScript，但您的jsfiddle并未使用它，因此我将使用常规JavaScript和jQuery。

img的选择器错误。使用句点.按类选择，并使用井号/哈希#按ID进行选择。

试试这个（如果你愿意，可以转换为CoffeeScript）：

$(window).scroll(function () {
  var scrollValue = $(window).scrollTop();
  $("#img").css("webkitFilter", "blur(" + scrollValue + "px)");
});

JSFiddle