动画剪辑：rect属性？ [英] Animate the clip: rect property?

问题描述

我想使用jQuery的 .animate（）动画css属性 clip：rect ，但找不到如果这是可能的任何地方。已尝试：

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）;

有人知道吗？

感谢

推荐答案

任何事情都是可能的，方法来做你想要的，而不使用 clip ，但如果你使用jQuery animate的 fx.step 函数，你可以动画任何东西，但你需要做一些计算来找出值和东西，但它是这样的：

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

这篇关于动画剪辑：rect属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！