Question

I want to animate the css property clip: rect with jQuery’s .animate() but can’t find if this is possible anywhere. Have tried:

$(".img1").animate({
clip: "rect(1px, 945px, 499px, 1px)"
},300);

without any luck. Does anyone know?

Thanks

Answer 1

Anything is possible, but there probably are easier ways to do what you want without using clip, but if you use jQuery animate’s fx.step function, you can animate anything, but you need to do some calculations to figure out values and stuff, but it goes something like this:

$(".img1").animate({
  fontSize: 100 //some unimportant CSS to animate so we get some values
},
{
  step: function(now, fx) { //now is the animated value from initial css value
      $(this).css('clip', 'rect(0px, '+now+'px, '+now+'px, 0px)')
  }
}, 10000);

FIDDLE