Wie animiere ich die Variable einer jQuery-Funktion in einer Schleife?

Question

Ich habe ein Bild (in einem div #respirando) verschwommen mit Foggy.js.

Ich möchte diese Unschärfe-Funktion kontinuierlich ein- und ausschalten. Ich nehme an, das würde bedeuten, die blurRadius Variable mit einer Schleifenfunktion steuern zu können. Ich habe versucht, .animate() zu verwenden, aber ich bin nicht sicher, ob ich eine jQuery-Eigenschaft wie diese animieren kann und woraus die Syntax bestehen würde. Hier

ist der Code:

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

Vielleicht $('#respirando').foggy.animate? Oder $('#respirando').animate?

Answer 1

Das Problem ist, dass blurRadius ist keine Eigenschaft Ihres Bildes, nur ein Parameter, der neblig verwendet, und daher nicht geeignet für die Verwendung mit .animate.

Es scheint, dass der Zweck von neblig ist, Browser zu unterstützen, die -webkit-filter: blur nicht unterstützen. Wenn Sie sich nicht darum kümmern, können Sie nicht neblig verwenden und dann können Sie einfach -webkit-filter: blur auf Ihr Bild anwenden und $('#respirando > img').animate() verwenden.

Eine andere Option ist es, eine Timer-Schleife zu erstellen und bei jeder Iteration nebelig zu zerstören und sie dann mit inkrementiertem increment neu zu erstellen.

Edit: @ 3dgoo hat ein Beispiel für die Verwendung von CSS-Animation gezeigt Unschärfe gelten auch:

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