Анимированный фильтр смазки css в jquery

Можно ли анимировать фильтр размытия css3 с помощью JQuery?

это работает как статический способ применения правил CSS:

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

но когда я заменяю метод css на метод animate, ничего не происходит...

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

Есть ли трюк, о котором я не знаю? как я могу оживить размытость элемента?

Ответ 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() может не совпадать с окончательным значением, как указано в другом ответе ниже. В этом случае всегда безопаснее связывать обратный вызов, который вручную устанавливает радиус размытия в конечное значение. Я модулировал функции так, чтобы их можно было повторно использовать без слишком больших увольнений:

$(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 и выше поддерживает unprefix фильтры CSS), IE и Opera не поддерживает для CSS3-фильтров, поэтому нет необходимости использовать -moz-, -ms- или -o- префиксы:)

Смотрите скрипту: http://jsfiddle.net/teddyrised/c72Eb/ (до обновления)

Ниже приведен фрагмент кода ниже для наиболее актуального примера:

$(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);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
    <p>Sample text that will be blurred.</p>
    <img src="http://placehold.it/500x500" />
</div>

Ответ 2

Один запрос Google Search дал мне этот результат, на который вы можете взглянуть. Я предлагаю только переключить класс в 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
}

Ответ 3

Я попробовал ответ Терри, который отлично поработал, пока я не попытался изменить процесс, чтобы оживить удаление эффекта размытия. Вместо того, чтобы заканчивать размытие 0, процесс заканчивается размытием 0.0815133px. Большинство браузеров, казалось, округлило это до нуля, но iOS не сделал и оставил заметное пятно на странице. После анимированных изменений, вручную установив размытие на ноль, зафиксируйте это:

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