如何设置jQuery函数的动画's循环中的变量

How do I animate a jQuery function's variable on a loop?

本文关键字：循环 变量 动画 设置 函数 jQuery 何设置      更新时间：2023-10-10

我有一个使用Foggy.js.模糊的图像（在div #respirando内部）

我想让模糊函数不断地打开和关闭。我想这意味着可以使用循环函数控制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？

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

雾的目的似乎是为不支持-webkit-filter: blur的浏览器提供支持。如果你不在乎这一点，你可以不使用雾，然后你可以把-webkit-filter: blur应用到你的图像上，然后使用$('#respirando > img').animate()。

另一种选择是创建一个定时器循环，在每次迭代中销毁雾状，然后用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);
  }
}
相关文章：