javascript - 如何在循环中为 jQuery 函数的变量设置动画？

Question

我有一个图像(在 div #respirando 内)使用 Foggy.js 进行模糊处理。

我想使模糊功能连续打开和关闭。我认为这意味着能够使用循环函数控制 blurRadius 变量。我尝试过使用 .animate() 但我不确定是否可以像这样对 jQuery 属性进行动画处理以及语法将包含哪些内容。

这是代码:

$(document).ready( function(){
    $('#respirando').foggy();

    $('#respirando').foggy({
        blurRadius: 6,          // In pixels.
        opacity: 1,             // Falls back to a filter for IE.
        cssFilterSupport: true  // Use "-webkit-filter" where available.
    }); 
});

也许$('#respirando').foggy.animate？ 或者$('#respirando').animate？

Answer 1

问题在于，blurRadius 不是图像的属性，只是foggy 使用的参数，因此不适合与.animate 一起使用。

看来foggy的目的是为不支持-webkit-filter:blur的浏览器提供支持。如果您不关心这一点，则不能使用foggy，然后您可以将 -webkit-filter:blur 应用于您的图像并使用 $('#respirando > img') .animate().

另一个选择是创建一个计时器循环，并在每次迭代时销毁foggy，然后用可能增加的blurRadius 重新创建它。

编辑:@3dgoo 展示了一个使用 CSS 动画来应用模糊的示例:

img {
  width: 300px;
}

.blur {
  animation: blur 5s infinite;
  animation: blur 5s infinite;
}

@-webkit-keyframes blur {
  0% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  50% {
    -webkit-filter: blur(5px);
    filter: blur(5px);
  }
}

@keyframes blur {
  0% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  50% {
    -webkit-filter: blur(5px);
    filter: blur(5px);
  }
}