Jquery 设置剪辑动画：rect属性？

我想用jQuery的

.animate（）

设置css属性

clip:rect

的动画，但找不到在任何地方都可以这样做。已尝试：

$（“.img1”）.animate({
剪辑：“rect（1px，945px，499px，1px）”

},300);

没有任何运气。有人知道吗

谢谢
任何事情都是可能的，但是不使用
clip
可能有更简单的方法来做你想做的事情，但是如果你使用jQuery animate的函数，你可以制作任何东西的动画，但是你需要做一些计算来计算出值和东西，但是它是这样的：

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

湿婆猛禽

要控制持续时间，请在步骤属性之前添加持续时间：3000。因此，守则将说明：

$('#A').on('click', function() {

    $(".img1").animate({
      fontSize: 1
    },
    {
      duration:3000,
      step: function(now, fx) {
          $(this).css('clip', 'rect(0px, '+(now+30)+'px, '+(now+30)+'px, 0px)')
      }
    }, 1000);


});

你必须准确地了解动画的运行方式，但这应该会有所帮助。
因为这是一个流行的问题，而且在我今天查找这个问题时，它是Google搜索结果的顶部，所以这里有一个jQuery插件，它可以与
clip:
属性和
animate（）
本地工作

学分：

/*
*jquery.animate.clip.js
*
*jQuery css剪辑动画支持——Joshua Poehls
*版本0.1.4
*来自Jim Palmer的插件http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/
*这个想法源自John Resig的jquery.color.js
*根据麻省理工学院许可证发布。
*/
（函数（jQuery）{
函数getStyle（元素、名称）{
返回（elem.currentStyle&&elem.currentStyle[name]）| | elem.style[name]；
}
函数getClip（elem）{
var cssClip=$（elem）.css（'clip'）| |'；
如果（！cssClip）{
//尝试以另一种方式为IE8获取剪辑矩形。
//这是jQuery返回未定义css（“clip”）的一种变通方法
//当剪辑在IE8.-JPOEHLS中的外部样式表中定义时
变量块={
顶部：getStyle（elem，'clipTop'），
右：getStyle（elem，'clipRight'），
底部：getStyle（元素“剪贴簿”），
左：getStyle（元素“clipLeft”）
};
if（pieces.top&&pieces.right&&pieces.bottom&&pieces.left）{
cssClip='rect（'+pieces.top+'+pieces.right+'+pieces.bottom+'+pieces.left+'）；
}
}
//去掉逗号并返回。
返回cssClip。替换（/，/g，）；
}
jQuery.fx.step.clip=函数（fx）{
如果（fx.pos==0）{
var-cRE=/rect\（[0-9\.]{1，}）（px | em）[，]？\s+（[0-9\.]{1，}）（px | em）[，]？\s+（[0-9\.]{1，}）（px | em）[，]？\s+（[0-9\.]{1，}）（px | em）/；
fx.start=cRE.exec（getClip（fx.elem））；
if（typeof fx.end=='string'）{
fx.end=cRE.exec（fx.end.replace（/，/g'）；
}
}
如果（fx.start和&fx.end）{
var sarr=new Array（），arr=new Array（），spos=fx.start.length，epos=fx.end.length，
emOffset=fx.start[ss+1]=“em”？（parseInt（$（fx.elem.css（'fontSize'））*1.333*parseInt（fx.start[ss]）：1；
对于（var ss=1；ss
遗憾的是，您不得不滥用一些无辜的CSS属性，但这确实是一个极好的解决方案！谢谢，但是我怎样才能控制动画的速度呢？更改持续时间值没有帮助。Ähm，您不需要设置伪属性的动画。你可以使用一个对象来传递参数：
$（{to:0}）.animate（{to:100}，{step:function（）{}}）
@yckart-你能为它设置一个提琴吗，看看它是如何工作的吗？
$（{val:0}）.animate（{val:100}，{step:function（now）{console.log（now）；}）
/*
* jquery.animate.clip.js
*
* jQuery css clip animation support -- Joshua Poehls
* version 0.1.4

* forked from Jim Palmer's plugin http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/
* idea spawned from jquery.color.js by John Resig
* Released under the MIT license.
*/
(function (jQuery) {

    function getStyle(elem, name) {
        return (elem.currentStyle && elem.currentStyle[name]) || elem.style[name];
    }

    function getClip(elem) {
        var cssClip = $(elem).css('clip') || '';

        if (!cssClip) {
            // Try to get the clip rect another way for IE8.
            // This is a workaround for jQuery's css('clip') returning undefined
            // when the clip is defined in an external stylesheet in IE8. -JPOEHLS
            var pieces = {
                top: getStyle(elem, 'clipTop'),
                right: getStyle(elem, 'clipRight'),
                bottom: getStyle(elem, 'clipBottom'),
                left: getStyle(elem, 'clipLeft')
            };

            if (pieces.top && pieces.right && pieces.bottom && pieces.left) {
                cssClip = 'rect(' + pieces.top + ' ' + pieces.right + ' ' + pieces.bottom + ' ' + pieces.left + ')';
            }
        }

        // Strip commas and return.
        return cssClip.replace(/,/g, ' ');
    }

    jQuery.fx.step.clip = function (fx) {
        if (fx.pos === 0) {
            var cRE = /rect\(([0-9\.]{1,})(px|em)[,]?\s+([0-9\.]{1,})(px|em)[,]?\s+([0-9\.]{1,})(px|em)[,]?\s+([0-9\.]{1,})(px|em)\)/;

            fx.start = cRE.exec(getClip(fx.elem));
            if (typeof fx.end === 'string') {
                fx.end = cRE.exec(fx.end.replace(/,/g, ' '));
            }
        }
        if (fx.start && fx.end) {
            var sarr = new Array(), earr = new Array(), spos = fx.start.length, epos = fx.end.length,
                emOffset = fx.start[ss + 1] == 'em' ? (parseInt($(fx.elem).css('fontSize')) * 1.333 * parseInt(fx.start[ss])) : 1;
            for (var ss = 1; ss < spos; ss += 2) { sarr.push(parseInt(emOffset * fx.start[ss])); }
            for (var es = 1; es < epos; es += 2) { earr.push(parseInt(emOffset * fx.end[es])); }
            fx.elem.style.clip = 'rect(' +
                parseInt((fx.pos * (earr[0] - sarr[0])) + sarr[0]) + 'px ' +
                parseInt((fx.pos * (earr[1] - sarr[1])) + sarr[1]) + 'px ' +
                parseInt((fx.pos * (earr[2] - sarr[2])) + sarr[2]) + 'px ' +
                parseInt((fx.pos * (earr[3] - sarr[3])) + sarr[3]) + 'px)';
        }
    }
})(jQuery);