Question

是否可以使用jQuery为CSS3模糊滤镜设置动画？

这是一种应用CSS规则的静态方法：

item.css({'filter': 'blur('+blur+')','-webkit-filter': 'blur('+blur+')','-moz-filter': 'blur('+blur+')','-o-filter': 'blur('+blur+')','-ms-filter': 'blur('+blur+')'});

但是当我用animate方法替换css方法时，没有任何反应。

item.animate({'filter': 'blur('+blur+')','-webkit-filter': 'blur('+blur+')','-moz-filter': 'blur('+blur+')','-o-filter': 'blur('+blur+')','-ms-filter': 'blur('+blur+')'},500);

有没有我不知道的伎俩？如何设置项目的模糊度？

Answer 1

您可以对具有数值的变量使用.animate()函数，并相应地设置动画 - 在每个步骤中调用一个函数并将该新数值指定为CSS滤镜模糊半径属性：）

$(function() {
    $({blurRadius: 0}).animate({blurRadius: 10}, {
        duration: 500,
        easing: 'swing', // or "linear"
                         // use jQuery UI or Easing plugin for more options
        step: function() {
            console.log(this.blurRadius);
            $('.item').css({
                "-webkit-filter": "blur("+this.blurRadius+"px)",
                "filter": "blur("+this.blurRadius+"px)"
            });
        }
    });
});

次要更新：jQuery的.animate()可能无法正确补间到最终值，如another answer below中所述。在这种情况下，链接一个手动将模糊半径设置为预期最终值的回调总是更安全。我已经将这些功能模块化，以便可以重复使用而不会有太多的冗余：

$(function() {
        // Generic function to set blur radius of $ele
    var setBlur = function(ele, radius) {
            $(ele).css({
               "-webkit-filter": "blur("+radius+"px)",
                "filter": "blur("+radius+"px)"
           });
       },

       // Generic function to tween blur radius
       tweenBlur = function(ele, startRadius, endRadius) {
            $({blurRadius: startRadius}).animate({blurRadius: endRadius}, {
                duration: 500,
                easing: 'swing', // or "linear"
                                 // use jQuery UI or Easing plugin for more options
                step: function() {
                    setBlur(ele, this.blurRadius);
                },
                callback: function() {
                    // Final callback to set the target blur radius
                     // jQuery might not reach the end value
                     setBlur(ele, endRadius);
                }
            });
        };

    // Start tweening
    tweenBlur('.item', 0, 10);
});

您可以在下面附带的代码段中看到此更新后的代码。

重要的是要注意 ~~Firefox~~ （FF≥35及以上supports unprefix CSS filters），IE和Opera有no support for CSS3 filters，所以不需要使用{{1 }}，-moz-或-ms-前缀:)

请参阅小提琴：http://jsfiddle.net/teddyrised/c72Eb/（更新前）

请参阅下面的代码段，了解最新的示例：

-o-

$(function() {
        // Generic function to set blur radius of $ele
    var setBlur = function(ele, radius) {
            $(ele).css({
               "-webkit-filter": "blur("+radius+"px)",
                "filter": "blur("+radius+"px)"
           });
       },
       
       // Generic function to tween blur radius
       tweenBlur = function(ele, startRadius, endRadius) {
            $({blurRadius: startRadius}).animate({blurRadius: endRadius}, {
                duration: 500,
                easing: 'swing', // or "linear"
                                 // use jQuery UI or Easing plugin for more options
                step: function() {
                    setBlur(ele, this.blurRadius);
                },
                complete: function() {
                    // Final callback to set the target blur radius
                    // jQuery might not reach the end value
                    setBlur(ele, endRadius);
               }
           });
        };
    
    // Start tweening towards blurred image
    window.setTimeout(function() {
        tweenBlur('.item', 0, 10);
    }, 1000);
    
    // Reverse tweening after 3 seconds
    window.setTimeout(function() {
        tweenBlur('.item', 10, 0);
    }, 3000);
});

Answer 2

一个Google搜索查询给了我this result您可能想看看。我建议做的只是在JS中切换一个类并处理CSS中的其余类，例如：

var $item = $('.item'); // or any selector you want to use
$item.addClass('item--blur');

处理CSS中的其余部分：

.item {
    transition: all 0.25s ease-out;
}
.item--blur {
    // all your filters
}

Answer 3

我尝试了Terry的回答，这个做得很好，直到我尝试将该过程反转为动画效果去除模糊效果。该过程以0.0815133px的模糊结束，而不是以0的模糊结束。大多数浏览器似乎都将这个降低到零，但iOS并没有在页面上留下明显的模糊。通过手动将模糊设置为零来进行动画更改后，修复此问题：

$('.item').css({
  "-webkit-filter": "blur(0)",
  "filter": "blur(0)"
});

Answer 4

尝试这个简单的解决方案：

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
async function applyBlurFilter() {
    for (var i = 1 ; i <= 100; i++) {
        $('h1').css({ "filter": "blur(" + i/10 + "px)" });
        await sleep(40); //4 seconds (40 * 100 / 10)
    }
}

$(document).ready(function(){
  applyBlurFilter();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
  This Text is going to be blured. 
</h1>

动画模糊滤镜

4 个答案: