0

在发现我不能在 Javascript 中使用供应商前缀后，我尝试制作自己的淡入模糊。在脚本运行大约 5-10 秒后，console.log调用速度减慢到每秒 1 个左右。这是我的事吗？

这是我制作的代码

var i = 0;
var iv = setInterval(function(){
    if(Number(i) > 2)
    {
        clearInterval(iv);
    }

    console.log(i);

    r = i.toFixed(2);

    $('#r').css('filter', 'blur(' + r + 'px)');
    $('#r').css('-webkit-filter', 'blur(' + r + 'px)');
    $('#r').css('-moz-filter', 'blur(' + r + 'px)');
    $('#r').css('-o-filter', 'blur(' + r + 'px)');
    $('#r').css('-ms-filter', 'blur(' + r + 'px)');

    i += 0.01;
}, 1);

还有一个JSFiddle

我猜这是 JS 处理浮点数的方式，还有什么方法可以让淡入淡出更平滑？i一旦到达周围，它就会非常紧张0.8。如何解决第二次延迟setInterval？其他人可以重现这个吗？

注意事项

尝试对 for 循环执行相同操作时发生了同样的事情，但它也使页面无用，直到它到达2循环停止时。

4

1 回答 1

0

您可以通过将字符串 'blur(' + r + 'px)' 的计算缓存到 javascript 变量中并保存不需要的计算来使脚本更快。

您还可以将 $('#r') 对象缓存到 javascript 变量中，甚至使用 jquery css 多字属性： $('#r').css({propertyName : value , propertyName : value})

就像是：

    var calc = 'blur(' + r + 'px)';     
    $('#r').css({
        'filter' :  calc ,
        '-webkit-filter' : calc,
        '-moz-filter' : calc,
        '-o-filter' : calc,
        '-ms-filter' : calc
    });

在这里检查：http: //jsfiddle.net/gMq3P/3/

于 2013-05-26T12:28:27.390 回答