How do I animate a jQuery function's variable on a loop?

I have an image (inside a div #respirando) blurred using Foggy.js.

I want to animate that blur function continuously on and off. I assume this would mean being able to control the blurRadius variable using a loop function. I have tried using .animate() but I am not sure if I can animate a jQuery property like this and what the syntax would consist of.

Here is the 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.
    }); 
});

Maybe $('#respirando').foggy.animate? Or $('#respirando').animate?

Answers 1

  • The problem is that blurRadius is not a property of your image, just a parameter that foggy uses, and therefore not eligible for use with .animate.

    It seems the purpose of foggy is to give support to browsers that don't support -webkit-filter: blur. If you don't care about that, you could not use foggy and then you could just apply -webkit-filter: blur to your image and use $('#respirando > img').animate().

    Another option is to create a timer loop and on each iteration destroy foggy then recreate it with blurRadius incremented maybe.

    Edit: @3dgoo has shown an example of using CSS animation to apply blur as well:

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

Related Articles