Animate the clip: rect property?

jquery html css jquery-animate clip
PaperThick picture PaperThick · Aug 7, 2012 · Viewed 15.5k times · Source

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

adeneo picture adeneo · Aug 7, 2012

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

Related questions

Animate element to auto height with jQuery

I want to animate a <div> from 200px to auto height. I can’t seem to make it work though. Does anyone know how? Here’s the code: $("div:first").click(function(){ $("#first").animate({ height: "auto" }, 1000 ); });

Read More
How do I animate a scale css property using jquery?

I am trying to have a circle div with the class of "bubble" to pop when a button is clicked using jQuery. I want to get it to appear from nothing and grow to its full size, but I am …

Read More
jQuery offset().top returns wrong value - error with margin

if you try to get a top offset from a list element within a parent, and that parent is not positioned at the top, you will get a wrong value. http://jsbin.com/yuxacuduna/1/edit?html,css,js,console,output …

Read More