webentwicklung-frage-antwort-db.com.de

Animieren Sie den Unschärfefilter

Kann man den CSS3-Unschärfefilter mit jQuery animieren?

Dies funktioniert als statische Methode zum Anwenden von CSS-Regeln: 

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

wenn ich jedoch die css-Methode durch die animierte Methode ersetze, passiert nichts.

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

Gibt es einen Trick, den ich nicht kenne? Wie kann ich die Unschärfe eines Artikels animieren?

jqueryhtmlcsscss3
15
Vincent Duprez

Sie können die Funktion .animate() für eine Variable mit einem numerischen Wert verwenden und entsprechend animieren. In jedem Schritt wird eine Funktion aufgerufen, und dieser neue numerische Wert wird als CSS-Filter-Unschärfe-Radius-Eigenschaft zugewiesen.

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

Minor update: Die .animate()-Funktion von jQuery wechselt möglicherweise nicht korrekt zum endgültigen Wert, wie in eine andere Antwort unten angegeben. In diesem Fall ist es immer sicherer, einen Rückruf zu verketten, der den Unschärfekreis manuell auf den beabsichtigten Endwert setzt. Ich habe die Funktionen so modularisiert, dass sie ohne zu viele Redundanzen wiederverwendet werden können:

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

Sie können diesen aktualisierten Code in Aktion unten im angefügten Code-Snippet anzeigen.

Es ist wichtig sich das zu merken Feuerfuchs (FF ≥35 und höher unterstützt unpräfixe CSS-Filter ), IE und Opera hat keine Unterstützung für CSS3-Filter , daher müssen keine -moz-, -ms- oder -o- verwendet werden. Präfixe :) 

Siehe Geige: http://jsfiddle.net/teddyrised/c72Eb/ (vor dem Update)

Das aktuellste Beispiel finden Sie unten im Code-Snippet:

$(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>

20
Terry

Eine Google-Suchabfrage gab mir dieses Ergebnis Sie möchten vielleicht einen Blick darauf werfen. Ich schlage vor, nur eine Klasse in Ihrem JS umzuschalten und den Rest in Ihrem CSS zu behandeln, zum Beispiel:

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

Behandeln Sie den Rest in Ihrem CSS:

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

Ich habe Terrys Antwort ausprobiert, die gut funktioniert hat, bis ich versucht habe, den Vorgang umzukehren, um das Entfernen des Unschärfeeffekts zu animieren. Anstatt mit einer Unschärfe von 0 zu enden, endete der Prozess mit einer Unschärfe von 0,0815133px. Die meisten Browser schienen das auf null abzurunden, aber iOS tat dies nicht und hinterließ eine deutliche Unschärfe auf der Seite. Nach der animierten Änderung durch manuelles Setzen der Unschärfe auf Null wurde Folgendes behoben:

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